Vuance UI Kit

Navigation

Navigation Bar

Compact bottom destination navigation for small and medium layouts.

Navigation Bar

Playground

Configure the baseline public contract and copy synchronized Vue markup.

Interactive preview

Changes are reflected in the example and source.

Properties

Destination

Vue

<m-navigation-bar
  :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"
  v-model="value"
 />

MNavigationBar API

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

MNavigationBar

Navigation family
src/runtime/components/ui/navigation-bar

Props

NameTypeDefault
items
MNavigationBarItem[]() => []
ariaLabel
string'Primary'

Slots

Events

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