Navbar

Arrange navigation links vertically or horizontally.

<x-navbar>
    <x-navbar.item href="#">Home</x-navbar.item>
    <x-navbar.item href="#">Features</x-navbar.item>
    <x-navbar.item href="#">Pricing</x-navbar.item>
    <x-navbar.item href="#">About</x-navbar.item>
</x-navbar>

Detecting the current page

The active link is automatically highlighted when the


    active

prop is set.

<x-navbar.item href="/" active>Home</x-navbar.item>
<x-navbar.item href="/" :active="false">Home</x-navbar.item>
<x-navbar.item href="/" :active="request()->is('/')">Home</x-navbar.item>

With icons

Add a leading icons for visual context.

Recomended to use outline icon variant with prefix


    o-...

for navbar items. More information visit icon component.

<x-navbar>
    <x-navbar.item href="#" icon="o-home">Home</x-navbar.item>
    <x-navbar.item href="#" icon="o-puzzle-piece">Features</x-navbar.item>
    <x-navbar.item href="#" icon="o-currency-dollar">Pricing</x-navbar.item>
    <x-navbar.item href="#" icon="o-user">About</x-navbar.item>
</x-navbar>

With badges

Add a trailing badge to a navbar item using the


    badge

prop and change the badge color using the


    badge-color

prop.

<x-navbar>
    <x-navbar.item href="#">Home</x-navbar.item>
    <x-navbar.item href="#" badge="12">Inbox</x-navbar.item>
    <x-navbar.item href="#">Contacts</x-navbar.item>
    <x-navbar.item href="#" badge="Pro" badge-color="lime">Calendar</x-navbar.item>
</x-navbar>

Dropdown navigation

Condense multiple navigation items into a single dropdown menu to save on space and group related items.

Dashboard

Transactions

<x-navbar>
    <x-navbar.item href="#">Dashboard</x-navbar.item>
    <x-navbar.item href="#">Transactions</x-navbar.item>
 
    <x-dropdown position="bottom-start">
        <x-navbar.item icon-trailing="o-chevron-down">Account</x-navbar.item>
 
        <x-navmenu>
            <x-navmenu.item href="#">Profile</x-navmenu.item>
            <x-navmenu.item href="#">Settings</x-navmenu.item>
            <x-navmenu.item href="#">Billing</x-navmenu.item>
        </x-navmenu>
    </x-dropdown>
</x-navbar>

Navlist (sidebar)

Arrange your navbar vertically using the navlist component.

<x-navlist class="w-64">
    <x-navlist.item href="#" icon="o-home">Home</x-navlist.item>
    <x-navlist.item href="#" icon="o-puzzle-piece">Features</x-navlist.item>
    <x-navlist.item href="#" icon="o-currency-dollar">Pricing</x-navlist.item>
    <x-navlist.item href="#" icon="o-user">About</x-navlist.item>
</x-navlist>

Navlist group

Group related navigation items.

<x-navlist class="w-64">
    <x-navlist.group heading="Account">
        <x-navlist.item href="#">Profile</x-navlist.item>
        <x-navlist.item href="#">Settings</x-navlist.item>
        <x-navlist.item href="#">Billing</x-navlist.item>
    </x-navlist.group>
</x-navlist>

Collapsible groups

Group related navigation items into collapsible sections using the


    expandable

prop.

Dashboard

Transactions

<x-navlist class="w-64">
    <x-navlist.item href="#" icon="o-home">Dashboard</x-navlist.item>
    <x-navlist.item href="#" icon="o-list-bullet">Transactions</x-navlist.item>
 
    <x-navlist.group heading="Account" expandable>
        <x-navlist.item href="#">Profile</x-navlist.item>
        <x-navlist.item href="#">Settings</x-navlist.item>
        <x-navlist.item href="#">Billing</x-navlist.item>
    </x-navlist.group>
</x-navlist>

If you want a group to be collapsed by default, you can use the


    expanded

prop:

<x-navlist.group heading="Account" expandable expanded>

Navlist badge

Show additional information related to a navlist item using the


    badge

prop and change the badge color using the


    badge-color

prop.

<x-navlist class="w-64">
    <x-navlist.item href="#" icon="o-home">Home</x-navlist.item>
    <x-navlist.item href="#" icon="o-envelope" badge="12">Inbox</x-navlist.item>
    <x-navlist.item href="#" icon="o-user-group">Contacts</x-navlist.item>
    <x-navlist.item href="#" icon="o-calendar-days" badge="Pro" badge-color="lime">Calendar</x-navlist.item>
</x-navlist>