Design System

Mobile Navigation

Default

The trigger button and the dialog are wired by ID via the HTML Invoker Commands API, with no JavaScript required. Clicking the button opens the full-screen dialog; the close button inside dismisses it.

1
<ButtonIcon
2
    icon="list"
3
    label="Open navigation menu"
4
    variant="transparent"
5
    commandFor="demo-mobile-navigation"
6
    command="show-modal"
7
/>
8

9
<MobileNavigation
10
    id="demo-mobile-navigation"
11
    title="Lloyd Atkinson"
12
    links={[
13
        { title: 'Articles', to: '/articles/' },
14
        { title: 'Notes', to: '/notes/' },
15
        { title: 'Speaking', to: '/speaking/' },
16
        { title: 'About', to: '/about/' },
17
    ]}
18
    iconLinks={[
19
        { title: 'Read', to: '/reading/', icon: 'books' },
20
        { title: 'RSS Feed', to: '/rss.xml', icon: 'rss' },
21
        { title: 'Contact', to: '/inbox/', icon: 'envelope' },
22
    ]}
23
/>