Dowe

NAVIGATION

SideNav

SideNav creates portable lateral navigation with headers, links, dividers, and expandable submenus.

PLAYGROUND

Configure lateral navigation

The controls bind directly to the preview and update the same target-neutral navigation tree without resetting submenu state.

Scheme

Variant

Size

Fill the available width

SideNav variant:"" scheme:"" size:"" wide:
  header label:"Workspace" description:"Project navigation" icon:"sidebar-minimalistic"
  item label:"Overview" description:"Activity and metrics" href:"/docs/views/navigation/sidenav" status:"New" icon:"home"
  divider
  submenu label:"Content" description:"Publishing" status:"2" open:true bordered:true icon:"document-text"
    item label:"Articles" href:"/docs/views" status:"12" icon:"notes"
    item label:"Authors" href:"/docs/views" icon:"users-group-rounded"
  item label:"Settings" description:"Preferences" href:"/docs/views" icon:"settings"

VISUAL OPTIONS

Variants, schemes, and sizes

Every sample uses the same navigation structure so each visual prop can be compared independently.

Variants

Schemes

Sizes

WIDTH

Intrinsic or available width

Without wide, SideNav and its interactive rows use their content width. Set wide:true when the navigation and the active or hovered rows should fill the available horizontal space on web, Android, and iOS.

Intrinsic by default

The navigation stays as narrow as its entries require.

Fill with wide

The navigation and its entry states expand across the available width.

STRUCTURE

Entries with clear roles

Use headers to introduce groups, items for navigation or actions, dividers for separation, and submenus for expandable destinations.

Navigation entries

An item can navigate with href or invoke an onClick action, but never both. Navigation options require href.

SideNav
  item label:"Overview" href:"/overview"
  item label:"Create project" onClick:createProject

Expandable submenus

The open prop defines initial state. Users can then expand or collapse the submenu locally on every target. On iOS, the layout height and content opacity animate without sliding rows through the trigger label or the navigation entries above it. With wide:true, the complete row is tappable, including the space between the label and arrow.

SideNav
  submenu label:"Content" open:true bordered:false
    item label:"Articles" href:"/articles"
    item label:"Authors" href:"/authors"

PORTABLE ICONS

Solar icons or custom SVG

Set icon to a Solar icon name on a header, item, or submenu. For a custom symbol, use one icon block containing exactly one Svg. Both forms lower to web, Android, and iOS.

SideNav size:"md" wide:true
  header label:"Workspace" icon:"sidebar-minimalistic"
  item label:"Home" href:"/" icon:"home"
  submenu label:"Content" icon:"document-text"
    item label:"Articles" href:"/articles" icon:"notes"
  item label:"Custom" href:"/custom"
    icon
      Svg viewBox:"0 0 24 24" w:5 h:5
        Path d:"M3 11l9-8 9 8v10H3z" fill:"currentColor"

API

SideNav props

SideNav also accepts applicable common identity, spacing, sizing, typography, visibility, radius, and border props.

Prop	Type	Default
No data There are no records to display

Entry props

Labels are required. Descriptions, status text, navigation, actions, and submenu state refine each structural entry.

Prop	Components	Type
No data There are no records to display

No data

No data