Navigation

Navigation Drawer

Modal side navigation surface for destinations and supporting content.

Playground

Configure the baseline public contract and copy synchronized Vue markup.

Open drawer

Properties

Open

Side

Outside click

Escape

Vue

<m-button
  @click="open = true"
>
  Open drawer
</m-button>

<m-navigation-drawer
  side="left"
  click-to-close
  esc-to-close
  v-model="open"
>
  <m-list>
    <m-list-item
      headline="Components"
      leading-icon="ic:round-widgets"
      interactive
     />
    <m-list-item
      headline="Foundations"
      leading-icon="ic:round-palette"
      interactive
     />
  </m-list>
  <template #header>
    <strong>
      Documentation
    </strong>
  </template>
</m-navigation-drawer>

MNavigationDrawer API

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

MNavigationDrawer

Navigation family

src/runtime/components/ui/navigation-drawer

Props

NameTypeDefault

side

'left' | 'right''left'

clickToClose

booleantrue

escToClose

booleantrue

containerClass

stringundefined

Slots

Events

@update:modelValueboolean