Bottom Navigation

#Overview

A bottom navigation bar with up to 5 items. Used for your app's primary navigation.

Copied!

<native:bottom-nav label-visibility="labeled">
    <native:bottom-nav-item
        id="home"
        icon="home"
        label="Home"
        url="/home"
        :active="true"
    />
    <native:bottom-nav-item
        id="profile"
        icon="person"
        label="Profile"
        url="/profile"
        badge="3"
    />
</native:bottom-nav>

<native:bottom-nav label-visibility="labeled">
    <native:bottom-nav-item
        id="home"
        icon="home"
        label="Home"
        url="/home"
        :active="true"
    />
    <native:bottom-nav-item
        id="profile"
        icon="person"
        label="Profile"
        url="/profile"
        badge="3"
    />
</native:bottom-nav>

#Props

label-visibility - labeled, selected, or unlabeled (optional, default: labeled)
dark - Force dark mode styling (optional)

#Children

A <native:bottom-nav> can contain up to 5 <native:bottom-nav-item> elements.

id - Unique identifier
icon - A named icon
label - Accessibility label (optional)
url - A URL to navigate to in the web view (optional)
active - Highlight this item as active (optional, default: false)
badge - Badge text/number (optional)
news - Show "new" indicator dot (optional, default: false)

Bottom Navigation

On this page

#Overview

#Props

#Children

#`badge` example

Bottom Navigation

On this page

#Overview

#Props

#Children

#badge example

#`badge` example