Dowe Views Documentation

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.

Inactive labels and descriptions keep the page foreground on every target, while the selected scheme is reserved for active and pressed rows.

SideNav items and submenu items can target a Section id with href:"#sidenav-structure". Dowe validates the fragment, animates the scroll, and keeps the section below a fixed or sticky AppBar on web.

Scheme

Variant

Size

Fill the available widthFill 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:"#sidenav-playground" status:"New" icon:"home"
  divider
  submenu label:"Content" description:"Publishing" status:"2" open:true bordered:true icon:"document-text"
    item label:"Structure" href:"#sidenav-structure" status:"12" icon:"notes"
    item label:"Width" href:"#sidenav-width" icon:"users-group-rounded"
  item label:"Props" description:"API reference" href:"#sidenav-props" 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.

Headers use the visible base color of their scheme on the transparent navigation surface. Items and submenu triggers use the normal text foreground while inactive.

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. Dowe then keeps the last expanded state in application-session memory, including when a SideNav inside a Drawer is unmounted and mounted again. The memory resets on application restart or web reload. Give structurally identical SideNav instances distinct id values when their submenu state must remain independent.

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 id:"content-navigation"
  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, inherit the normal foreground while inactive, and use the resolved scheme foreground when active.

SideNav 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