NavList

Render an already prepared navigation tree without the surrounding site panel controls.

NavList

View source · API reference

A small prepared tree

NavList expects stateful rows. Supply active/open state explicitly when using it outside NavMenu.

<nav aria-label="Example component links">
  <NavList
    :items="[{title:'Layout',isActive:false,isOpen:true,stateKey:'example-layout',children:[{title:'Flex',url:'/components/layout/flex/',isActive:false,isOpen:false,stateKey:'example-flex'},{title:'Grid',url:'/components/layout/grid/',isActive:false,isOpen:false,stateKey:'example-grid'}]},{title:'NavList',url:'/components/site/nav-list/',isActive:true,isOpen:false,stateKey:'example-nav-list',ariaCurrent:'page',tone:'accent'}]"
  />
</nav>

Behavior and accessibility

NavList renders a ul. Wrap it in a labelled nav when it is a standalone navigation region. Stable stateKey values identify groups to the navigation runtime. isActive alone does not compute link classes or ariaCurrent; NavMenu performs that preparation.

API reference

NavList contract

Props below are the public template API. RefOrValue accepts a literal or a reactive ref; bind refs with a colon-prefixed attribute. Native attributes and events can be passed through the component root.

Composition

No slots. Register defineNavigationComponents with BtnLink and Icon. The internal NavItem component is composed by NavList and is not a standalone public row API.