Navigation - Components - Pajak Design System

Navbar

Top navigation bar with six layout variants — standard, underline, dark, split, stacked, and mobile. Active state is controlled via props; no JavaScript required. On small screens the links slot is hidden; pass a menu slot to enable a hamburger button that opens a sidebar drawer.

x-pajak::navbar

Prop	Type	Default	Description
`variant`	`NavbarVariant`	`Standard`	Layout variant.
`menu`	slot	—	Sidebar nav items for the mobile drawer. When provided, a hamburger button appears on mobile (`< 768px`) and the dialog is rendered automatically.

Standard (default)

navbar-default.blade.php

@use('Pajak\Ui\Common\Enums\Variant')
@use('Pajak\Ui\Common\Enums\Size')
@use('Pajak\Ui\Common\Enums\AvatarSize')

<x-pajak::navbar>
    <x-slot:brand>
        <span class="ex-brand">pajak</span>
    </x-slot:brand>
    <x-slot:links>
        <x-pajak::nav-link href="#" label="Dashboard" :active="true" />
        <x-pajak::nav-link href="#" label="Returns" />
        <x-pajak::nav-link href="#" label="Documents" :count="3" />
        <x-pajak::nav-link href="#" label="Reports" />
    </x-slot:links>
    <x-slot:actions>
        <x-pajak::button :variant="Variant::Ghost" :size="Size::Sm">Help</x-pajak::button>
        <x-pajak::avatar initials="AK" />
    </x-slot:actions>
    <x-slot:menu>
        <x-pajak::sidebar-item href="#" label="Dashboard" :active="true">
            <x-slot:icon>
                <x-heroicon-o-home width="16" height="16" />
            </x-slot:icon>
        </x-pajak::sidebar-item>
        <x-pajak::sidebar-item href="#" label="Returns">
            <x-slot:icon>
                <x-heroicon-o-document width="16" height="16" />
            </x-slot:icon>
        </x-pajak::sidebar-item>
        <x-pajak::sidebar-item href="#" label="Documents" :dot="true">
            <x-slot:icon>
                <x-heroicon-o-folder width="16" height="16" />
            </x-slot:icon>
        </x-pajak::sidebar-item>
        <x-pajak::sidebar-item href="#" label="Reports">
            <x-slot:icon>
                <x-heroicon-o-chart-bar width="16" height="16" />
            </x-slot:icon>
        </x-pajak::sidebar-item>
    </x-slot:menu>
    <x-slot:menuFooter>
        <div class="ex-sidebar-footer">
            <x-pajak::avatar initials="AK" :size="AvatarSize::Sm" />
            <span>Anna Kowalska</span>
        </div>
    </x-slot:menuFooter>
</x-pajak::navbar>

Underline variant

navbar-underline.blade.php

@use('Pajak\Ui\Common\Enums\Navbar\NavbarVariant')
@use('Pajak\Ui\Common\Enums\AvatarSize')

<x-pajak::navbar :variant="NavbarVariant::Underline">
    <x-slot:brand>
        <span class="ex-brand">pajak</span>
    </x-slot:brand>
    <x-slot:links>
        <x-pajak::nav-link href="#" label="All returns" />
        <x-pajak::nav-link href="#" label="In progress" :active="true" />
        <x-pajak::nav-link href="#" label="Submitted" />
    </x-slot:links>
    <x-slot:actions>
        <x-pajak::avatar initials="AK" />
    </x-slot:actions>
    <x-slot:menu>
        <x-pajak::sidebar-item href="#" label="All returns">
            <x-slot:icon>
                <x-heroicon-o-document width="16" height="16" />
            </x-slot:icon>
        </x-pajak::sidebar-item>
        <x-pajak::sidebar-item href="#" label="In progress" :active="true">
            <x-slot:icon>
                <x-heroicon-o-clock width="16" height="16" />
            </x-slot:icon>
        </x-pajak::sidebar-item>
        <x-pajak::sidebar-item href="#" label="Submitted">
            <x-slot:icon>
                <x-heroicon-o-check width="16" height="16" />
            </x-slot:icon>
        </x-pajak::sidebar-item>
    </x-slot:menu>
    <x-slot:menuFooter>
        <div class="ex-sidebar-footer">
            <x-pajak::avatar initials="AK" :size="AvatarSize::Sm" />
            <span>Anna Kowalska</span>
        </div>
    </x-slot:menuFooter>
</x-pajak::navbar>

Dark variant

navbar-dark.blade.php

@use('Pajak\Ui\Common\Enums\Navbar\NavbarVariant')
@use('Pajak\Ui\Common\Enums\Variant')
@use('Pajak\Ui\Common\Enums\Size')

<x-pajak::navbar :variant="NavbarVariant::Dark">
    <x-slot:brand>
        <span class="ex-brand ex-brand--white">pajak</span>
    </x-slot:brand>
    <x-slot:links>
        <x-pajak::nav-link href="#" label="Product" />
        <x-pajak::nav-link href="#" label="Pricing" :active="true" />
        <x-pajak::nav-link href="#" label="Docs" />
    </x-slot:links>
    <x-slot:actions>
        <x-pajak::button :variant="Variant::Ghost" :size="Size::Sm">Log in</x-pajak::button>
        <x-pajak::button :size="Size::Sm">Sign up</x-pajak::button>
    </x-slot:actions>
    <x-slot:menu>
        <x-pajak::sidebar-item href="#" label="Product">
            <x-slot:icon>
                <x-heroicon-o-computer-desktop width="16" height="16" />
            </x-slot:icon>
        </x-pajak::sidebar-item>
        <x-pajak::sidebar-item href="#" label="Pricing" :active="true">
            <x-slot:icon>
                <x-heroicon-o-currency-dollar width="16" height="16" />
            </x-slot:icon>
        </x-pajak::sidebar-item>
        <x-pajak::sidebar-item href="#" label="Docs">
            <x-slot:icon>
                <x-heroicon-o-book-open width="16" height="16" />
            </x-slot:icon>
        </x-pajak::sidebar-item>
    </x-slot:menu>
    <x-slot:menuFooter>
        <div class="ex-sidebar-footer" style="gap: 8px;">
            <x-pajak::button :variant="Variant::Ghost" :size="Size::Sm">Log in</x-pajak::button>
            <x-pajak::button :size="Size::Sm">Sign up</x-pajak::button>
        </div>
    </x-slot:menuFooter>
</x-pajak::navbar>

Stacked variant

navbar-stacked.blade.php

@use('Pajak\Ui\Common\Enums\Navbar\NavbarVariant')

<x-pajak::navbar :variant="NavbarVariant::Stacked">
    <x-slot:brand>
        <span class="ex-brand">pajak</span>
    </x-slot:brand>
    <x-slot:links>
        <x-pajak::nav-link href="#" label="Dashboard" />
        <x-pajak::nav-link href="#" label="Returns" :active="true" />
        <x-pajak::nav-link href="#" label="Documents" />
    </x-slot:links>
    <x-slot:actions>
        <x-pajak::avatar initials="AK" />
    </x-slot:actions>
    <x-slot:subLinks>
        <x-pajak::nav-link href="#" label="All returns" :active="true" />
        <x-pajak::nav-link href="#" label="In progress" />
        <x-pajak::nav-link href="#" label="Submitted" />
    </x-slot:subLinks>
    <x-slot:menu>
        <x-pajak::sidebar-item href="#" label="Dashboard">
            <x-slot:icon>
                <x-heroicon-o-home width="16" height="16" />
            </x-slot:icon>
        </x-pajak::sidebar-item>
        <x-pajak::sidebar-item href="#" label="Returns" :active="true">
            <x-slot:icon>
                <x-heroicon-o-document width="16" height="16" />
            </x-slot:icon>
            <x-pajak::sidebar-sub-item href="#" label="All returns" :active="true" />
            <x-pajak::sidebar-sub-item href="#" label="In progress" />
            <x-pajak::sidebar-sub-item href="#" label="Submitted" />
        </x-pajak::sidebar-item>
        <x-pajak::sidebar-item href="#" label="Documents">
            <x-slot:icon>
                <x-heroicon-o-folder width="16" height="16" />
            </x-slot:icon>
        </x-pajak::sidebar-item>
    </x-slot:menu>
</x-pajak::navbar>

Split variant

navbar-split.blade.php

@use('Pajak\Ui\Common\Enums\Navbar\NavbarVariant')
@use('Pajak\Ui\Common\Enums\Variant')
@use('Pajak\Ui\Common\Enums\Size')

<x-pajak::navbar :variant="NavbarVariant::Split">
    <x-slot:brand>
        <span class="ex-brand">pajak</span>
    </x-slot:brand>
    <x-slot:title>
        <span class="ex-muted">Returns / </span>2025 Federal
    </x-slot:title>
    <x-slot:actions>
        <x-pajak::button :variant="Variant::Ghost" :size="Size::Sm">Save draft</x-pajak::button>
        <x-pajak::avatar initials="AK" />
    </x-slot:actions>
    <x-slot:menu>
        <x-pajak::sidebar-item href="#" label="Dashboard" :active="true">
            <x-slot:icon>
                <x-heroicon-o-home width="16" height="16" />
            </x-slot:icon>
        </x-pajak::sidebar-item>
        <x-pajak::sidebar-item href="#" label="Returns">
            <x-slot:icon>
                <x-heroicon-o-document width="16" height="16" />
            </x-slot:icon>
        </x-pajak::sidebar-item>
        <x-pajak::sidebar-item href="#" label="Documents">
            <x-slot:icon>
                <x-heroicon-o-folder width="16" height="16" />
            </x-slot:icon>
        </x-pajak::sidebar-item>
        <x-pajak::sidebar-item href="#" label="Reports">
            <x-slot:icon>
                <x-heroicon-o-chart-bar width="16" height="16" />
            </x-slot:icon>
        </x-pajak::sidebar-item>
    </x-slot:menu>
</x-pajak::navbar>

Mobile compact

navbar-mobile.blade.php

@use('Pajak\Ui\Common\Enums\Navbar\NavbarVariant')

<x-pajak::navbar :variant="NavbarVariant::Mobile">
    <x-slot:brand>
        <span class="ex-brand">pajak</span>
    </x-slot:brand>
    <x-slot:links>
        <div class="pajak-navbar__title">
            <div class="pajak-navbar__title-line">2025 Federal</div>
            <div class="pajak-navbar__subtitle">Step 4 of 9 · Deductions</div>
        </div>
    </x-slot:links>
    <x-slot:actions>
        <x-pajak::avatar initials="AK" />
    </x-slot:actions>
</x-pajak::navbar>

Bottom tab bar

navbar-tab-bar.blade.php

<x-pajak::nav-tab-bar>
    <x-pajak::nav-tab label="Home" :active="true">
        <x-slot:icon>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
        </x-slot:icon>
    </x-pajak::nav-tab>
    <x-pajak::nav-tab label="Returns">
        <x-slot:icon>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
        </x-slot:icon>
    </x-pajak::nav-tab>
    <x-pajak::nav-tab label="Docs" :dot="true">
        <x-slot:icon>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
        </x-slot:icon>
    </x-pajak::nav-tab>
    <x-pajak::nav-tab label="Profile">
        <x-slot:icon>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
        </x-slot:icon>
    </x-pajak::nav-tab>
</x-pajak::nav-tab-bar>

Sidebar

Vertical navigation sidebar with six layout variants — standard, rail, dark, workspace, wide, and filters. No JavaScript required for static variants; the mobile overlay and rail toggle require PajakSidebar.initAll().

x-pajak::sidebar

Standard (default)

sidebar-default.blade.php

@use('Pajak\Ui\Common\Enums\AvatarSize')

<x-pajak::sidebar>
    <x-slot:brand>
        <span class="ex-brand">pajak</span>
    </x-slot:brand>

    <x-pajak::sidebar-section label="Workspace" />
    <x-pajak::sidebar-item href="#" label="Dashboard" :active="true">
        <x-slot:icon>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
        </x-slot:icon>
    </x-pajak::sidebar-item>
    <x-pajak::sidebar-item href="#" label="Returns" :count="12">
        <x-slot:icon>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
        </x-slot:icon>
    </x-pajak::sidebar-item>
    <x-pajak::sidebar-item href="#" label="Documents" :dot="true">
        <x-slot:icon>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
        </x-slot:icon>
    </x-pajak::sidebar-item>
    <x-pajak::sidebar-item href="#" label="Clients">
        <x-slot:icon>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
        </x-slot:icon>
    </x-pajak::sidebar-item>

    <x-slot:footer>
        <div class="ex-sidebar-footer">
            <x-pajak::avatar initials="AK" :size="AvatarSize::Sm" />
            <span>Anna Kowalska</span>
        </div>
    </x-slot:footer>
</x-pajak::sidebar>

Rail variant

sidebar-rail.blade.php

@use('Pajak\Ui\Common\Enums\Sidebar\SidebarVariant')

<x-pajak::sidebar :variant="SidebarVariant::Rail">
    <x-pajak::sidebar-item href="#" label="Dashboard" :active="true">
        <x-slot:icon>
            <x-heroicon-o-home width="16" height="16" />
        </x-slot:icon>
    </x-pajak::sidebar-item>
    <x-pajak::sidebar-item href="#" label="Returns">
        <x-slot:icon>
            <x-heroicon-o-document width="16" height="16" />
        </x-slot:icon>
    </x-pajak::sidebar-item>
    <x-pajak::sidebar-item href="#" label="Clients">
        <x-slot:icon>
            <x-heroicon-o-user width="16" height="16" />
        </x-slot:icon>
    </x-pajak::sidebar-item>
</x-pajak::sidebar>

Rail toggle

sidebar-rail-toggle.blade.php

@use('Pajak\Ui\Common\Enums\AvatarSize')

<x-pajak::sidebar>
    <x-slot:brand>
        <span class="ex-brand">pajak</span>
        <button class="pajak-sb-rail-btn" data-pajak-sidebar-rail aria-label="Toggle rail">
            <x-heroicon-o-chevron-left style="width:16px;height:16px" />
        </button>
    </x-slot:brand>

    <x-pajak::sidebar-section label="Workspace" />
    <x-pajak::sidebar-item href="#" label="Dashboard" :active="true">
        <x-slot:icon><x-heroicon-o-home width="16" height="16" /></x-slot:icon>
    </x-pajak::sidebar-item>
    <x-pajak::sidebar-item href="#" label="Returns" :count="12">
        <x-slot:icon><x-heroicon-o-document width="16" height="16" /></x-slot:icon>
    </x-pajak::sidebar-item>
    <x-pajak::sidebar-item href="#" label="Clients">
        <x-slot:icon><x-heroicon-o-user width="16" height="16" /></x-slot:icon>
    </x-pajak::sidebar-item>

    <x-slot:footer>
        <div class="ex-sidebar-footer">
            <x-pajak::avatar initials="AK" :size="AvatarSize::Sm" />
            <span>Anna Kowalska</span>
        </div>
    </x-slot:footer>
</x-pajak::sidebar>

Dark variant

sidebar-dark.blade.php

@use('Pajak\Ui\Common\Enums\Sidebar\SidebarVariant')
@use('Pajak\Ui\Common\Enums\AvatarSize')

<x-pajak::sidebar :variant="SidebarVariant::Dark">
    <x-slot:brand>
        <span class="ex-brand ex-brand--white">pajak</span>
    </x-slot:brand>
    <x-pajak::sidebar-section label="Workspace" />
    <x-pajak::sidebar-item href="#" label="Dashboard" :active="true">
        <x-slot:icon>
            <x-heroicon-o-home width="16" height="16" />
        </x-slot:icon>
    </x-pajak::sidebar-item>
    <x-pajak::sidebar-item href="#" label="Returns" :count="12">
        <x-slot:icon>
            <x-heroicon-o-document width="16" height="16" />
        </x-slot:icon>
    </x-pajak::sidebar-item>
    <x-pajak::sidebar-item href="#" label="Documents">
        <x-slot:icon>
            <x-heroicon-o-folder width="16" height="16" />
        </x-slot:icon>
    </x-pajak::sidebar-item>
    <x-pajak::sidebar-item href="#" label="Clients">
        <x-slot:icon>
            <x-heroicon-o-user width="16" height="16" />
        </x-slot:icon>
    </x-pajak::sidebar-item>
    <x-slot:footer>
        <div class="ex-sidebar-footer">
            <x-pajak::avatar initials="AK" :size="AvatarSize::Sm" />
            <span style="color:rgba(255,255,255,0.7)">Anna Kowalska</span>
        </div>
    </x-slot:footer>
</x-pajak::sidebar>

Workspace variant

sidebar-workspace.blade.php

@use('Pajak\Ui\Common\Enums\Sidebar\SidebarVariant')
@use('Pajak\Ui\Common\Enums\AvatarSize')

<x-pajak::sidebar :variant="SidebarVariant::Workspace">
    <x-slot:brand>
        <span class="ex-brand">pajak</span>
    </x-slot:brand>

    <x-slot:header>
        <div class="ex-sidebar-workspace-header">
            <div class="ex-sidebar-workspace-switcher">
                <x-heroicon-o-building-office width="14" height="14" style="color:var(--fg-tertiary)" />
                <span style="flex:1">Kowalski & Co.</span>
                <x-heroicon-o-chevron-up-down width="12" height="12" style="color:var(--fg-tertiary)" />
            </div>
            <a href="#" class="pajak-btn pajak-btn--sm pajak-btn--primary" style="justify-content:center;text-decoration:none;">New return</a>
        </div>
    </x-slot:header>

    <x-pajak::sidebar-section label="Workspace" />
    <x-pajak::sidebar-item href="#" label="Dashboard" :active="true">
        <x-slot:icon><x-heroicon-o-home width="16" height="16" /></x-slot:icon>
    </x-pajak::sidebar-item>
    <x-pajak::sidebar-item href="#" label="Returns" :count="12">
        <x-slot:icon><x-heroicon-o-document width="16" height="16" /></x-slot:icon>
    </x-pajak::sidebar-item>
    <x-pajak::sidebar-item href="#" label="Clients">
        <x-slot:icon><x-heroicon-o-user width="16" height="16" /></x-slot:icon>
    </x-pajak::sidebar-item>

    <x-slot:footer>
        <div class="ex-sidebar-footer">
            <x-pajak::avatar initials="AK" :size="AvatarSize::Sm" />
            <span>Anna Kowalska</span>
        </div>
    </x-slot:footer>
</x-pajak::sidebar>

Wide variant with sub-items

sidebar-wide.blade.php

@use('Pajak\Ui\Common\Enums\Sidebar\SidebarVariant')
@use('Pajak\Ui\Common\Enums\AvatarSize')

<x-pajak::sidebar :variant="SidebarVariant::Wide">
    <x-slot:brand>
        <span class="ex-brand">pajak</span>
    </x-slot:brand>

    <x-pajak::sidebar-section label="Workspace" />
    <x-pajak::sidebar-item href="#" label="Dashboard">
        <x-slot:icon><x-heroicon-o-home width="16" height="16" /></x-slot:icon>
    </x-pajak::sidebar-item>
    <x-pajak::sidebar-item href="#" label="Returns" :active="true">
        <x-slot:icon><x-heroicon-o-document width="16" height="16" /></x-slot:icon>
    </x-pajak::sidebar-item>
    <div class="pajak-sb__sub">
        <x-pajak::sidebar-sub-item href="#" label="All returns" :count="24" />
        <x-pajak::sidebar-sub-item href="#" label="In progress" :active="true" :count="8" />
        <x-pajak::sidebar-sub-item href="#" label="Submitted" />
    </div>
    <x-pajak::sidebar-item href="#" label="Clients">
        <x-slot:icon><x-heroicon-o-user width="16" height="16" /></x-slot:icon>
    </x-pajak::sidebar-item>

    <x-slot:footer>
        <div class="ex-sidebar-footer">
            <x-pajak::avatar initials="AK" :size="AvatarSize::Sm" />
            <span>Anna Kowalska</span>
        </div>
    </x-slot:footer>
</x-pajak::sidebar>

Filters variant

Filter returns

sidebar-filters.blade.php

@use('Pajak\Ui\Common\Enums\Sidebar\SidebarVariant')

<x-pajak::sidebar :variant="SidebarVariant::Filters">
    <x-slot:brand>Filter returns</x-slot:brand>

    <div class="ex-sidebar-filters-body">
        <div>
            <div class="ex-sidebar-filters-label">Status</div>
            <div class="ex-sidebar-filters-group">
                <x-pajak-form::checkbox name="status[]" value="in_progress" label="In progress" :checked="true" />
                <x-pajak-form::checkbox name="status[]" value="submitted" label="Submitted" />
                <x-pajak-form::checkbox name="status[]" value="approved" label="Approved" />
            </div>
        </div>

        <div>
            <div class="ex-sidebar-filters-label">Tax year</div>
            <div class="ex-sidebar-filters-group">
                <x-pajak-form::checkbox name="year[]" value="2024" label="2024" :checked="true" />
                <x-pajak-form::checkbox name="year[]" value="2023" label="2023" />
            </div>
        </div>
    </div>

    <x-slot:footer>
        <div class="ex-sidebar-filters-footer">
            <button class="pajak-btn pajak-btn--sm pajak-btn--secondary">Cancel</button>
            <button class="pajak-btn pajak-btn--sm pajak-btn--primary">Apply</button>
        </div>
    </x-slot:footer>
</x-pajak::sidebar>

Segmented

A button group selector for switching between mutually exclusive options. Use for view switchers, filter toggles, and compact option pickers.

x-pajak::segmented

Default

segmented-default.blade.php

<x-pajak::segmented>
    <x-pajak::segmented-option label="All" :active="true" value="all" />
    <x-pajak::segmented-option label="Active" value="active" />
    <x-pajak::segmented-option label="Archived" value="archived" />
</x-pajak::segmented>

Pill variant

segmented-pill.blade.php

@use('Pajak\Ui\Common\Enums\Segmented\SegmentedVariant')

<x-pajak::segmented :variant="SegmentedVariant::Pill">
    <x-pajak::segmented-option label="PLN" :active="true" value="pln" />
    <x-pajak::segmented-option label="EUR" value="eur" />
    <x-pajak::segmented-option label="USD" value="usd" />
</x-pajak::segmented>

Brand variant

segmented-brand.blade.php

@use('Pajak\Ui\Common\Enums\Segmented\SegmentedVariant')

<x-pajak::segmented :variant="SegmentedVariant::Brand">
    <x-pajak::segmented-option label="Refund" :active="true" value="refund" />
    <x-pajak::segmented-option label="Owed" value="owed" />
    <x-pajak::segmented-option label="Even" value="even" />
</x-pajak::segmented>

Bordered variant

segmented-bordered.blade.php

@use('Pajak\Ui\Common\Enums\Segmented\SegmentedVariant')

<x-pajak::segmented :variant="SegmentedVariant::Bordered">
    <x-pajak::segmented-option label="Monthly" :active="true" value="monthly" />
    <x-pajak::segmented-option label="Yearly" value="yearly" />
</x-pajak::segmented>

With icons & full width

segmented-options.blade.php

{{-- With icons --}}
<x-pajak::segmented>
    <x-pajak::segmented-option label="Cards" :active="true" value="cards">
        <x-slot:icon>
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg>
        </x-slot:icon>
    </x-pajak::segmented-option>
    <x-pajak::segmented-option label="List" value="list">
        <x-slot:icon>
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>
        </x-slot:icon>
    </x-pajak::segmented-option>
</x-pajak::segmented>

{{-- Full width --}}
<x-pajak::segmented :full="true">
    <x-pajak::segmented-option label="Personal" :active="true" value="personal" />
    <x-pajak::segmented-option label="Joint" value="joint" />
    <x-pajak::segmented-option label="Business" :disabled="true" value="business" />
</x-pajak::segmented>

Breadcrumbs

Navigation breadcrumb trail built from a typed BreadcrumbItem array. Supports three variants and two separator styles.

x-pajak::breadcrumbs

Default

Home
Returns
2025
Donations

breadcrumbs-default.blade.php

@use('Pajak\Ui\Common\Dto\BreadcrumbItem')

<x-pajak::breadcrumbs :items="[
    BreadcrumbItem::home('#'),
    BreadcrumbItem::link('Returns', '#'),
    BreadcrumbItem::link('2025', '#'),
    BreadcrumbItem::current('Donations'),
]" />

Slash separator

Returns
2025
Donations

breadcrumbs-slash.blade.php

@use('Pajak\Ui\Common\Dto\BreadcrumbItem')
@use('Pajak\Ui\Common\Enums\BreadcrumbSeparator')

@php
$items = [
    BreadcrumbItem::link('Returns', '#'),
    BreadcrumbItem::link('2025', '#'),
    BreadcrumbItem::current('Donations'),
];
@endphp

<x-pajak::breadcrumbs :items="$items" :separator="BreadcrumbSeparator::Slash" />

Compact variant

Returns
2025
Donations

breadcrumbs-compact.blade.php

@use('Pajak\Ui\Common\Dto\BreadcrumbItem')
@use('Pajak\Ui\Common\Enums\BreadcrumbVariant')

@php
    $items = [
        BreadcrumbItem::link('Returns', '#'),
        BreadcrumbItem::link('2025', '#'),
        BreadcrumbItem::current('Donations'),
    ];
@endphp

<x-pajak::breadcrumbs :items="$items" :variant="BreadcrumbVariant::Compact" />

Pill variant

breadcrumbs-pill.blade.php

@use('Pajak\Ui\Common\Dto\BreadcrumbItem')
@use('Pajak\Ui\Common\Enums\BreadcrumbVariant')

@php
$items = [
    BreadcrumbItem::link('Returns', '#'),
    BreadcrumbItem::link('2025', '#'),
    BreadcrumbItem::current('Donations'),
];
@endphp

<x-pajak::breadcrumbs :items="$items" :variant="BreadcrumbVariant::Pill" />

Tabs

Tab navigation with four layout variants — underline, pill, segmented, and vertical. JavaScript handles click-to-activate; panel visibility is managed by the consumer.

x-pajak::tabs

Underline (default)

tabs-default.blade.php

<x-pajak::tabs>
    <x-pajak::tab label="Overview" :active="true" />
    <x-pajak::tab label="Documents" :count="12" />
    <x-pajak::tab label="Activity" />
    <x-pajak::tab label="Archive" :disabled="true" />
</x-pajak::tabs>

Pill variant

tabs-pill.blade.php

@use('Pajak\Ui\Common\Enums\Tabs\TabsVariant')

<x-pajak::tabs :variant="TabsVariant::Pill">
    <x-pajak::tab label="All" :active="true" />
    <x-pajak::tab label="In progress" />
    <x-pajak::tab label="Submitted" />
</x-pajak::tabs>

Segmented variant

tabs-segmented.blade.php

@use('Pajak\Ui\Common\Enums\Tabs\TabsVariant')

<x-pajak::tabs :variant="TabsVariant::Segmented">
    <x-pajak::tab label="Cards" :active="true" />
    <x-pajak::tab label="List" />
    <x-pajak::tab label="Table" />
</x-pajak::tabs>

Stepper

Multi-step progress indicator with four variants: horizontal, pill, vertical, and bar. Purely presentational — state is driven by PHP props.

x-pajak::stepper

Horizontal (default)

Identity Verified
Income
3
Deductions Add reliefs
4
Review

stepper-horizontal.blade.php

@use('Pajak\Ui\Common\Enums\Stepper\StepperStepState')

<x-pajak::stepper>
    <x-pajak::stepper-step :step="1" title="Identity" description="Verified" :state="StepperStepState::Done" />
    <x-pajak::stepper-step :step="2" title="Income" :state="StepperStepState::Done" />
    <x-pajak::stepper-step :step="3" title="Deductions" description="Add reliefs" :state="StepperStepState::Active" />
    <x-pajak::stepper-step :step="4" title="Review" :last="true" />
</x-pajak::stepper>

Pill variant

Identity 2 Income 3 Review

stepper-pill.blade.php

@use('Pajak\Ui\Common\Enums\Stepper\StepperStepState')
@use('Pajak\Ui\Common\Enums\Stepper\StepperVariant')

<x-pajak::stepper :variant="StepperVariant::Pill">
    <x-pajak::stepper-step :step="1" title="Identity" :state="StepperStepState::Done" :variant="StepperVariant::Pill" />
    <x-pajak::stepper-step :step="2" title="Income" :state="StepperStepState::Active" :variant="StepperVariant::Pill" />
    <x-pajak::stepper-step :step="3" title="Review" :variant="StepperVariant::Pill" :last="true" />
</x-pajak::stepper>

Bar variant

Deductions Step 3 of 5

60%

stepper-bar.blade.php

@use('Pajak\Ui\Common\Enums\Stepper\StepperVariant')

<x-pajak::stepper :variant="StepperVariant::Bar" :current="3" :total="5" label="Deductions" />