Top Bar

#Overview

A top bar with title and action buttons. This renders at the top of the screen.

<native:top-bar title="Dashboard" subtitle="Welcome back">
    <native:top-bar-action
        id="search"
        icon="search"
        :url="route('search')"
    />
    <native:top-bar-action
        id="settings"
        icon="settings"
        url="https://yourapp.com/my-account"
    />
</native:top-bar>

#Props

• title - The title text
• show-navigation-icon - Show back/menu button (optional, default: true)
• background-color - Background color. Hex code (optional)
• text-color - Text color. Hex code (optional)
• elevation - Shadow depth 0-24 (optional) [Android]

#Children

A <native:top-bar> can contain up to 10 <native:top-bar-action> elements. These populate the trailing edge, collapsing to a menu if there are too many.

#Props

• id - Unique identifier
• icon - A named icon
• label - Accessibility label (optional)
• url - A URL to navigate to in the web view (optional)