Navigation

Navigation Rail

Persistent vertical destination navigation with compact and expanded modes.

Playground

Configure the baseline public contract and copy synchronized Vue markup.

Properties

Destination

Expanded

Vue

<m-navigation-rail
  :items='[{&quot;id&quot;:&quot;home&quot;,&quot;icon&quot;:&quot;ic:round-home&quot;,&quot;label&quot;:&quot;Home&quot;},{&quot;id&quot;:&quot;components&quot;,&quot;icon&quot;:&quot;ic:round-widgets&quot;,&quot;label&quot;:&quot;Components&quot;,&quot;badge&quot;:3},{&quot;id&quot;:&quot;settings&quot;,&quot;icon&quot;:&quot;ic:round-settings&quot;,&quot;label&quot;:&quot;Settings&quot;}]'
  aria-label="Playground navigation"
  :expanded="false"
  v-model="value"
 />

MNavigationRail API

Props, slots, and events are extracted from the current public UI Kit contract.

MNavigationRail

Navigation family

src/runtime/components/ui/navigation-rail

Props

NameTypeDefault

items

MNavigationRailItem[]() => []

expanded

booleanfalse

ariaLabel

string'Primary'

Slots

Events

MNavigationRail does not emit component-specific events. Native events fall through to its root element.