Dowe

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.

NavMenu variant:"ghost" scheme:"primary" size:"md"
  item label:"Overview" href:"/docs/views"
  submenu label:"Views"
    item label:"Layout" description:"Shells and regions" href:"/docs/views/layout/appbar"
    item label:"Navigation" description:"Menus and drawers" href:"/docs/views/navigation/sidenav"
  item label:"Server" href:"/docs/server"

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.

Submenu destinations

Submenu triggers cannot navigate or call an action. Their arrow opens 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 trigger closes on outside interaction, Escape, or a navigation event where the platform supports it.

NavMenu
  megamenu label:"Resources"
    content
      Grid columns:{ xs:1 md:2 } gap:4
        Card variant:"soft" scheme:"surface" 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