Phara UI

Phara UI v2.x

Navbar

A horizontal navigation component with support for icons, badges, and active state detection.

Basic

Default navbar with simple navigation items.

Blade

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

With Icons

Add a leading icon to each navbar item using the icon prop.

Blade

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

With Badges

Display counts or labels alongside items using the badge and badge-color props.

Blade

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

Active State

Active state is auto-detected from the current URL, or set manually with the current prop.

Blade

{{-- Auto-detected from current URL --}}
<x-ui::navbar>
    <x-ui::navbar-item href="/home">Home</x-ui::navbar-item>
    <x-ui::navbar-item href="/features">Features</x-ui::navbar-item>
</x-ui::navbar>

{{-- Manually set --}}
<x-ui::navbar>
    <x-ui::navbar-item href="#" :current="true">Home</x-ui::navbar-item>
    <x-ui::navbar-item href="#" :current="false">Features</x-ui::navbar-item>
</x-ui::navbar>

Combined

Mix icons and badges together for a rich navigation experience.

Blade

<x-ui::navbar>
    <x-ui::navbar-item href="#" icon="home">Home</x-ui::navbar-item>
    <x-ui::navbar-item href="#" icon="inbox" badge="5">Inbox</x-ui::navbar-item>
    <x-ui::navbar-item href="#" icon="users">Team</x-ui::navbar-item>
    <x-ui::navbar-item href="#" icon="calendar" badge="Pro" badge-color="lime">Calendar</x-ui::navbar-item>
    <x-ui::navbar-item href="#" icon="cog">Settings</x-ui::navbar-item>
</x-ui::navbar>

Navlist

A vertical navigation list component for sidebars and menus, with support for icons, badges, and active state detection.

Basic

Default navlist with simple vertical navigation items.

Blade

<x-ui::navlist>
    <x-ui::navlist-item href="#">Home</x-ui::navlist-item>
    <x-ui::navlist-item href="#">Features</x-ui::navlist-item>
    <x-ui::navlist-item href="#">Pricing</x-ui::navlist-item>
    <x-ui::navlist-item href="#">About</x-ui::navlist-item>
</x-ui::navlist>

With Icons

Add a leading icon to each navlist item using the icon prop.

Blade

<x-ui::navlist>
    <x-ui::navlist-item href="#" icon="home">Home</x-ui::navlist-item>
    <x-ui::navlist-item href="#" icon="puzzle-piece">Features</x-ui::navlist-item>
    <x-ui::navlist-item href="#" icon="currency-dollar">Pricing</x-ui::navlist-item>
    <x-ui::navlist-item href="#" icon="user">About</x-ui::navlist-item>
</x-ui::navlist>

With Badges

Display counts or labels alongside items using the badge and badge-color props.

Blade

<x-ui::navlist>
    <x-ui::navlist-item href="#">Home</x-ui::navlist-item>
    <x-ui::navlist-item href="#" badge="12">Inbox</x-ui::navlist-item>
    <x-ui::navlist-item href="#">Contacts</x-ui::navlist-item>
    <x-ui::navlist-item href="#" badge="Pro" badge-color="lime">Calendar</x-ui::navlist-item>
</x-ui::navlist>

Active State

Active state is auto-detected from the current URL, or set manually with the current prop.

Blade

{{-- Auto-detected from current URL --}}
<x-ui::navlist>
    <x-ui::navlist-item href="/home">Home</x-ui::navlist-item>
    <x-ui::navlist-item href="/features">Features</x-ui::navlist-item>
</x-ui::navlist>

{{-- Manually set --}}
<x-ui::navlist>
    <x-ui::navlist-item href="#" :current="true">Home</x-ui::navlist-item>
    <x-ui::navlist-item href="#" :current="false">Features</x-ui::navlist-item>
</x-ui::navlist>

Combined

Mix icons and badges together for a rich sidebar navigation experience.

Blade

<x-ui::navlist>
    <x-ui::navlist-item href="#" icon="home">Home</x-ui::navlist-item>
    <x-ui::navlist-item href="#" icon="inbox" badge="5">Inbox</x-ui::navlist-item>
    <x-ui::navlist-item href="#" icon="users">Team</x-ui::navlist-item>
    <x-ui::navlist-item href="#" icon="calendar" badge="Pro" badge-color="lime">Calendar</x-ui::navlist-item>
    <x-ui::navlist-item href="#" icon="cog">Settings</x-ui::navlist-item>
</x-ui::navlist>

Navlist Group

Group related navlist items under a labeled section, with optional collapsible behavior.

Basic

Use a label to visually group related navigation items.

Blade

<x-ui::navlist>
    <x-ui::navlist-group label="Main">
        <x-ui::navlist-item href="#" icon="home">Home</x-ui::navlist-item>
        <x-ui::navlist-item href="#" icon="inbox" badge="3">Inbox</x-ui::navlist-item>
    </x-ui::navlist-group>

    <x-ui::navlist-group label="Settings">
        <x-ui::navlist-item href="#" icon="user">Profile</x-ui::navlist-item>
        <x-ui::navlist-item href="#" icon="cog-6-tooth">Preferences</x-ui::navlist-item>
        <x-ui::navlist-item href="#" icon="shield-check">Security</x-ui::navlist-item>
    </x-ui::navlist-group>
</x-ui::navlist>

Collapsible Group

Add collapsible to allow users to expand and collapse a group. Use open to control the initial state.

Blade

<x-ui::navlist>
    <x-ui::navlist-group label="Main" collapsible>
        <x-ui::navlist-item href="#" icon="home">Home</x-ui::navlist-item>
        <x-ui::navlist-item href="#" icon="inbox" badge="3">Inbox</x-ui::navlist-item>
    </x-ui::navlist-group>

    {{-- Starts collapsed --}}
    <x-ui::navlist-group label="Settings" collapsible :open="false">
        <x-ui::navlist-item href="#" icon="user">Profile</x-ui::navlist-item>
        <x-ui::navlist-item href="#" icon="cog-6-tooth">Preferences</x-ui::navlist-item>
        <x-ui::navlist-item href="#" icon="shield-check">Security</x-ui::navlist-item>
    </x-ui::navlist-group>
</x-ui::navlist>

Multiple Groups

Compose a full sidebar layout by mixing grouped and ungrouped items.

Blade

<x-ui::navlist>
    <x-ui::navlist-item href="#" icon="home">Dashboard</x-ui::navlist-item>

    <x-ui::navlist-group label="Workspace">
        <x-ui::navlist-item href="#" icon="document-text">Documents</x-ui::navlist-item>
        <x-ui::navlist-item href="#" icon="folder">Projects</x-ui::navlist-item>
        <x-ui::navlist-item href="#" icon="calendar">Calendar</x-ui::navlist-item>
    </x-ui::navlist-group>

    <x-ui::navlist-group label="Team">
        <x-ui::navlist-item href="#" icon="users">Members</x-ui::navlist-item>
        <x-ui::navlist-item href="#" icon="chat-bubble-left-right" badge="2">Messages</x-ui::navlist-item>
    </x-ui::navlist-group>

    <x-ui::navlist-item href="#" icon="cog-6-tooth">Settings</x-ui::navlist-item>
</x-ui::navlist>