Top Bar

Important

Prefer the Layout model. Declare your app's top bar with the NavBar builder in a NativeLayout class rather than placing <native:top-bar> in a screen. This page documents the inline element, which still works but is no longer the recommended approach.

Overview#

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

Copied!

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

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

Props#

title - The title text (required)
subtitle - A small line under the title (optional)
show-navigation-icon - Show the back chevron (optional, default: true)
background-color - Background color. Hex string (optional)
text-color - Title and icon color. Also flows to <native:top-bar-action> icons (optional)
elevation - Hairline thickness at the bottom of the bar in dp (optional)

Children#

A <native:top-bar> can contain up to 10 <native:top-bar-action> elements. These are displayed on the trailing edge of the bar.

On Android, the first 3 actions are shown as icon buttons; additional actions collapse into an overflow menu (⋮). On iOS, if more than 5 actions are provided, they collapse into an overflow menu.

`<native:top-bar-action>` Props#

Important

In the Layout model a top-bar action is a NavAction — use that builder rather than placing <native:top-bar-action> inline.

id - Unique identifier (required)
icon - A named icon (required)
label - Text label for the action. Used for accessibility and displayed in overflow menus (optional but recommended)
url - A URL to navigate to when tapped (optional)

Builder API#

When a <native:top-bar> is supplied by a layout, you build it fluently with the NavBar and NavAction builders rather than writing it in Blade.

Copied!

use Native\Mobile\Edge\Layouts\Builders\NavAction;
use Native\Mobile\Edge\Layouts\Builders\NavBar;
 
NavBar::make()
    ->title('SyncUp')
    ->subtitle('All caught up')
    ->back()
    ->backgroundColor('#0891b2')
    ->textColor('#FFFFFF')
    ->elevation(8)
    ->action(NavAction::make('search')->icon('search')->press('openSearch'));

use Native\Mobile\Edge\Layouts\Builders\NavAction;
use Native\Mobile\Edge\Layouts\Builders\NavBar;

NavBar::make()
    ->title('SyncUp')
    ->subtitle('All caught up')
    ->back()
    ->backgroundColor('#0891b2')
    ->textColor('#FFFFFF')
    ->elevation(8)
    ->action(NavAction::make('search')->icon('search')->press('openSearch'));

`NavBar` methods#

make() - Create a new builder
title(?string $title) - Title text
subtitle(?string $subtitle) - Small line under the title
back(bool $show = true) - Show the back chevron
backgroundColor(string $color) - Bar background color
textColor(string $color) - Title and icon tint
elevation(int $px) - Hairline thickness at the bottom of the bar
action(NavAction $action) - Append a trailing action

`NavAction` methods#

make(string $id) - Create an action with a unique id
icon(string $icon) - A named icon
label(string $label) - Accessibility / overflow-menu label
url(string $url) - A URL to navigate to when tapped
press(string $method) - A Livewire-style method on the screen to invoke when tapped
event(string $event) - A native event name to dispatch (advanced)

Per-screen overrides#

Screens can contribute additional NavBar actions on top of what their layout supplies by overriding navigationOptions():

Copied!

use Native\Mobile\Edge\Layouts\Builders\NavAction;
use Native\Mobile\Edge\Layouts\Builders\NavBarOptions;
use Native\Mobile\Edge\NativeComponent;
 
class ItemDetail extends NativeComponent
{
    public function navigationOptions(): ?NavBarOptions
    {
        return NavBarOptions::make()
            ->title("Item #{$this->param('id')}")
            ->action(NavAction::make('save')->icon('save')->press('save'));
    }
 
    public function save(): void
    {
        // ...
    }
}

use Native\Mobile\Edge\Layouts\Builders\NavAction;
use Native\Mobile\Edge\Layouts\Builders\NavBarOptions;
use Native\Mobile\Edge\NativeComponent;

class ItemDetail extends NativeComponent
{
    public function navigationOptions(): ?NavBarOptions
    {
        return NavBarOptions::make()
            ->title("Item #{$this->param('id')}")
            ->action(NavAction::make('save')->icon('save')->press('save'));
    }

    public function save(): void
    {
        // ...
    }
}

See Layouts for the full picture.

Top Bar

Overview#

Props#

Children#

<native:top-bar-action> Props#

Builder API#

NavBar methods#

NavAction methods#

Per-screen overrides#

`<native:top-bar-action>` Props#

`NavBar` methods#

`NavAction` methods#