Dowe Views Documentation

NAVIGATION

NavMenu

NavMenu creates portable horizontal navigation with links, expandable submenus, and rich megamenu content.

HORIZONTAL NAVIGATION

Direct links and local menus

Place NavMenu in an AppBar center region or another horizontal shell. Direct items navigate immediately; submenu and megamenu triggers keep their own open state.

Web, Android, and iOS open submenu and megamenu content in a floating overlay, so the page layout never moves. The popover uses the theme background surface while scheme styles its trigger and active destinations.

Activating a submenu or megamenu trigger again toggles its overlay closed; activating content inside it dispatches navigation or an action before dismissal.

On iOS, NavMenu uses the same Dowe-owned anchored overlay as Dropdown instead of the system popover. Android lets the selected child run before popup dismissal, then animates to the laid-out Section below the AppBar.

An item can use href:"#navmenu-structure" to target a Section id on the current page. Dowe validates the fragment, scrolls smoothly, respects reduced motion, and keeps the destination below a fixed or sticky AppBar.

NavMenu variant:"ghost" scheme:"primary" size:"md"
  item label:"Overview" href:"#navmenu-introduction"
  submenu label:"On this page"
    item label:"Structure" description:"Submenus and megamenus" href:"#navmenu-structure"
    item label:"Icons" description:"Portable SVG entries" href:"#navmenu-icons"
  item label:"Props" href:"#navmenu-props"

VISUAL OPTIONS

Variants, schemes, and sizes

Visual props apply to links, open triggers, and active destinations without changing the navigation structure.

Variants

Schemes

Sizes

STRUCTURE

Submenus and megamenus

A submenu contains direct navigation items. A megamenu owns one content region, where normal view components can form a richer destination panel.

Activating content inside either popover dispatches its navigation or action before closing the overlay on web, Android, and iOS. Tapping the trigger again or outside also closes it.

Submenu destinations

Submenu triggers cannot navigate or call an action. Their arrow toggles the local menu and rotates while the menu is visible.

NavMenu
  submenu label:"Learn"
    item label:"Guides" description:"Start here" href:"/guides"
    item label:"API" description:"Reference" href:"/api"

Megamenu content

Use the required content region to group normal view nodes. The floating surface closes after content activation, trigger reactivation, or outside interaction; web also supports Escape.

NavMenu
  megamenu label:"Resources"
    content
      Grid columns:{ xs:1 md:2 } gap:4
        Card variant:"soft" p:4
          Title size:"lg"
            "Learn"
          Text size:"sm" color:"muted"
            "Guides and examples."

PORTABLE ICONS

Use one custom SVG per entry

Each item, submenu, or megamenu can contain one icon block with exactly one Svg. The same vector lowers to web, Android, and iOS.

NavMenu size:"md"
  item label:"Home" href:"/"
    icon
      Svg viewBox:"0 0 24 24" w:5 h:5
        Path d:"M3 11l9-8 9 8v10H3z" fill:"currentColor"
  submenu label:"Docs"
    icon
      Svg viewBox:"0 0 24 24" w:5 h:5
        Path d:"M5 4h14v16H5z" fill:"currentColor"
    item label:"Guide" href:"/docs"

API

NavMenu props

NavMenu also accepts applicable common identity, spacing, sizing, typography, visibility, radius, and border props. Use scheme, not color, for its visual family.

Prop	Type	Default
No data There are no records to display

Entry props

Every entry needs a label. Only item entries can navigate or invoke an action; href and onClick are mutually exclusive.

Prop	Components	Type	Behavior
No data There are no records to display

No data

No data