Boson
Packagist GitHub

Navbar

A vertical navigation bar for sidebars and app shells. Contains navbar.item children with href and optional icon. The current page is auto-detected from the URL or can be set explicitly.

Basic usage

<x-boson::navbar>
    <x-boson::navbar.item icon="home" href="/dashboard">Dashboard</x-boson::navbar.item>
    <x-boson::navbar.item icon="user" href="/profile">Profile</x-boson::navbar.item>
    <x-boson::navbar.item icon="cog-6-tooth" href="/settings">Settings</x-boson::navbar.item>
</x-boson::navbar>

With badges

<x-boson::navbar>
    <x-boson::navbar.item icon="home" href="/dashboard">Dashboard</x-boson::navbar.item>
    <x-boson::navbar.item icon="inbox" badge="12" badge:color="red" href="/inbox">Inbox</x-boson::navbar.item>
    <x-boson::navbar.item icon="bell" badge="3" href="/notifications">Notifications</x-boson::navbar.item>
    <x-boson::navbar.item icon="cog-6-tooth" href="/settings">Settings</x-boson::navbar.item>
</x-boson::navbar>

With trailing icon

<x-boson::navbar>
    <x-boson::navbar.item icon="folder" icon:trailing="chevron-right" href="/projects">Projects</x-boson::navbar.item>
    <x-boson::navbar.item icon="document-text" icon:trailing="chevron-right" href="/documents">Documents</x-boson::navbar.item>
    <x-boson::navbar.item icon="arrow-top-right-on-square" icon:trailing="arrow-right" href="https://example.com">External link</x-boson::navbar.item>
</x-boson::navbar>

Explicit current

<x-boson::navbar>
    <x-boson::navbar.item icon="home" href="/dashboard" :current="false">Dashboard</x-boson::navbar.item>
    <x-boson::navbar.item icon="user" href="/profile" :current="true">Profile</x-boson::navbar.item>
    <x-boson::navbar.item icon="cog-6-tooth" href="/settings">Settings</x-boson::navbar.item>
</x-boson::navbar>

Without icons

<x-boson::navbar>
    <x-boson::navbar.item href="/dashboard">Dashboard</x-boson::navbar.item>
    <x-boson::navbar.item href="/projects">Projects</x-boson::navbar.item>
    <x-boson::navbar.item href="/team">Team</x-boson::navbar.item>
    <x-boson::navbar.item href="/reports">Reports</x-boson::navbar.item>
</x-boson::navbar>

With dropdown

<x-boson::navbar>
    <x-boson::navbar.item icon="home" href="/dashboard">Dashboard</x-boson::navbar.item>
    <x-boson::navbar.item icon="user" href="/profile">Profile</x-boson::navbar.item>
    <x-boson::dropdown>
        <x-boson::navbar.item icon="ellipsis-horizontal" icon:trailing="chevron-down">More</x-boson::navbar.item>
        <x-boson::dropdown.menu>
            <x-boson::dropdown.item icon="cog-6-tooth" href="/settings">Settings</x-boson::dropdown.item>
            <x-boson::dropdown.item icon="question-mark-circle" href="/help">Help</x-boson::dropdown.item>
            <x-boson::dropdown.separator />
            <x-boson::dropdown.item icon="arrow-right-start-on-rectangle">Sign out</x-boson::dropdown.item>
        </x-boson::dropdown.menu>
    </x-boson::dropdown>
</x-boson::navbar>

Props

navbar.item

Prop Type Default Description
icon string null Leading icon name
icon:trailing string null Trailing icon name
icon:variant string mini Icon variant (inherited from icon component)
href string null URL for the item. Renders as <a> when set, <button> otherwise
current bool auto Mark item as current. Auto-detected from href when not set
badge string null Badge text or count to display
badge:color string null Badge color
badge:size string xs Badge size
turbo bool true Enable Turbo Drive for this item
turbo:* string null Turbo attributes (e.g. turbo:frame, turbo:action)