# Mobile Nav Toggle

## Usage

The button that opens [Mobile Nav](/en/components/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.

```ts
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:

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

### Anatomy

- **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

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

```vue
<script setup lang="ts">
import { MobileNav, MobileNavToggle } from '@astryx-vue/core/MobileNav'
import { SideNavItem, SideNavSection } from '@astryx-vue/core/SideNav'
import { HStack } from '@astryx-vue/core/Stack'
import { Text } from '@astryx-vue/core/Text'
import { ref } from 'vue'

const open = ref(false)
</script>

<template>
  <div>
    <HStack align="center" :gap="3">
      <MobileNavToggle v-model:is-open="open" controls="mobile-nav-toggle-demo" label="Open menu" />
      <Text weight="bold">
        Page title
      </Text>
    </HStack>
    <MobileNav id="mobile-nav-toggle-demo" v-model:is-open="open" header="Navigation" side="start">
      <SideNavSection title="Pages">
        <SideNavItem href="#home" is-selected label="Home" />
        <SideNavItem href="#settings" label="Settings" />
      </SideNavSection>
    </MobileNav>
  </div>
</template>
```

## MobileNavToggle Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `isOpen` | `boolean` | `false` | Open state of the drawer, paired with `v-model:is-open`. The glyph and `aria-expanded` follow it. |
| `label` | `string` | — | Accessible name of the button, written to `aria-label`. Left out, it comes from the locale messages: “Open menu”, or “Close” while the drawer is open. |
| `controls` | `string` | — | Id of the drawer, written to `aria-controls`. |

## Events

| Name | Payload | Description |
| --- | --- | --- |
| `update:isOpen` | `boolean` | The button was pressed; drives `v-model:is-open`. |

## Slots

`MobileNavToggle` has no slots. It draws the built-in menu glyph, so there is nothing to put inside it.