Side Navigation

Overview#

A slide-out navigation drawer with support for groups, headers, and dividers.

Copied!

<native:side-nav gestures-enabled="true">
    <native:side-nav-header
        title="My App"
        subtitle="[email protected]"
        icon="person"
    />
 
    <native:side-nav-item
        id="home"
        label="Home"
        icon="home"
        url="/home"
        :active="true"
    />
 
    <native:side-nav-group heading="Account" :expanded="false">
        <native:side-nav-item
            id="profile"
            label="Profile"
            icon="person"
            url="/profile"
        />
        <native:side-nav-item
            id="settings"
            label="Settings"
            icon="settings"
            url="/settings"
        />
    </native:side-nav-group>
 
    <native:horizontal-divider />
 
    <native:side-nav-item
        id="help"
        label="Help"
        icon="help"
        url="https://help.example.com"
        open-in-browser="true"
    />
</native:side-nav>

<native:side-nav gestures-enabled="true">
    <native:side-nav-header
        title="My App"
        subtitle="[email protected]"
        icon="person"
    />

    <native:side-nav-item
        id="home"
        label="Home"
        icon="home"
        url="/home"
        :active="true"
    />

    <native:side-nav-group heading="Account" :expanded="false">
        <native:side-nav-item
            id="profile"
            label="Profile"
            icon="person"
            url="/profile"
        />
        <native:side-nav-item
            id="settings"
            label="Settings"
            icon="settings"
            url="/settings"
        />
    </native:side-nav-group>

    <native:horizontal-divider />

    <native:side-nav-item
        id="help"
        label="Help"
        icon="help"
        url="https://help.example.com"
        open-in-browser="true"
    />
</native:side-nav>

Props#

gestures-enabled - Swipe to open (default: false) [Android]
dark - Force dark mode (optional)

Children#

`<native:side-nav-header>`#

title - Title text (optional)
subtitle - Subtitle text (optional)
icon - A named icon (optional)
background-color - Background color. Hex code (optional)
show-close-button - Show a close × (optional, default: true) [Android]
pinned - Keep header visible when scrolling (optional, default: false)

`<native:side-nav-item>`#

id - Unique identifier (required)
label - Display text (required)
icon - A named icon (required)
url - A URL to navigate to in the web view (required)
active - Highlight this item as active (optional, default: false)
badge - Badge text (optional)
badge-color - Hex code or named color (optional)

`<native:side-nav-group>`#

heading - The group's heading (required)
expanded - Initially expanded (optional, default: false)
icon - Material icon (optional)

`<native:horizontal-divider>`#

Add visual separators between navigation items. This item has no properties.

Side Navigation

Overview#

Props#

Children#

<native:side-nav-header>#

<native:side-nav-item>#

<native:side-nav-group>#

<native:horizontal-divider>#

`<native:side-nav-header>`#

`<native:side-nav-item>`#

`<native:side-nav-group>`#

`<native:horizontal-divider>`#