Mobile Nav | astryx-vue

Usage

MobileNav is a dialog drawer that slides in from one side of the screen, not a bottom sheet. Bind MobileNavToggle to the same v-model:is-open. While open, focus stays in the drawer. Escape or a press on the scrim closes it and returns focus to where it was. If another layer opens inside the drawer, Escape closes that top layer first. Pinch-zoom stays with the browser, and the body can still scroll vertically.

side is start, end, or auto. auto picks the side from where focus was when the drawer opened. The top nav creates this pair for you when its media query matches.

vue

<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" />
  <MobileNav id="app-nav" v-model:is-open="open" header="Menu" side="start">
    <!-- items -->
  </MobileNav>
</template>

Anatomy

Element	Description
Navigation overlay	Full-viewport dialog overlay that hosts the mobile navigation drawer.
Drawer	Painted panel that slides in from the resolved viewport edge.
Header	Fixed row containing optional header content and the close button.
Content	Scrollable region containing the navigation content.
Close button	Button that closes the navigation drawer.
Toggle button	AppShell-aware Button that opens or closes the drawer on mobile viewports.

Best practices

Guidance	Practice
Do	Point the toggle `controls` at the drawer id so the button and dialog are related.
Do	Put ordinary links in the drawer. Do not wrap them in another `role="menu"`.
Avoid	Do not use a bottom sheet for this navigation. It is a side drawer.

Examples

Basic Drawer

A menu button opens sectioned navigation.

End Side Drawer

The same drawer slides in from the end edge.

Without Title

Without a title, the drawer keeps the items and the close button.

Usage ​