Usage

The button that opens Mobile Nav on a narrow viewport. It draws the two-line menu glyph, turns it into a close mark while the drawer is open, and keeps aria-expanded in step.

import { MobileNavToggle } from '@astryx-vue/core/MobileNav'

Bind the toggle and the drawer to the same v-model:is-open, and point controls at the drawer's id so the button and the dialog are related:

<script setup lang="ts">
import { MobileNav, MobileNavToggle } from '@astryx-vue/core/MobileNav'
import { ref } from 'vue'

const open = ref(false)
</script>

<template>
  <MobileNavToggle v-model:is-open="open" controls="app-nav" label="Open navigation" />
  <MobileNav id="app-nav" v-model:is-open="open" header="Navigation" side="start">
    <!-- items -->
  </MobileNav>
</template>

Anatomy

Element	Description
Toggle button	Button that opens or closes the drawer on mobile viewports.

Best practices

Guidance	Practice
Do	Bind the toggle and the drawer to the same v-model:is-open, so the glyph never disagrees with the drawer.
Do	Share the same nav items between Mobile Nav and Side Nav by extracting them into a variable.
Do	Give it a label when the page has more than one navigation region, so the button says which one it opens.
Don't	Use Mobile Nav on desktop: use a persistent Side Nav instead.

Examples

Common configurations, variations, and states.

Basic

Page title

Navigation

Pages

Home

Settings

A nav toggle with an accessible label next to a page title. It opens a Mobile Nav drawer bound to the same state.