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.

x-pajak::navbar

Standard (default)

navbar-default.blade.php

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

<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-pajak::navbar>

Variants — underline, dark, stacked, split

navbar-variants.blade.php

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

{{-- Underline --}}
<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-pajak::navbar>

{{-- Dark --}}
<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-pajak::navbar>

{{-- Stacked --}}
<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-pajak::navbar>

{{-- Split --}}
<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-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.

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 & Dark variants

sidebar-variants.blade.php

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

<div class="ex-row ex-row--gap-lg ex-row--start">

    {{-- Rail --}}
    <x-pajak::sidebar :variant="SidebarVariant::Rail">
        <x-slot:brand>
            <span class="ex-brand ex-brand--lg">P</span>
        </x-slot:brand>
        <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">
            <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="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"/></svg>
            </x-slot:icon>
        </x-pajak::sidebar-item>
    </x-pajak::sidebar>

    {{-- Dark --}}
    <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>
                <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>

</div>

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>

Variants — pill, brand, bordered

segmented-variants.blade.php

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

{{-- Pill --}}
<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 --}}
<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 --}}
<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'),
]" />

Variants & separators

Returns
2025
Donations

Returns
2025
Donations

Returns
2025
Donations

breadcrumbs-variants.blade.php

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

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

<x-pajak::breadcrumbs :items="$items" />
<x-pajak::breadcrumbs :items="$items" :separator="BreadcrumbSeparator::Slash" />
<x-pajak::breadcrumbs :items="$items" :variant="BreadcrumbVariant::Compact" />
<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 & Segmented variants

Pill

Segmented

tabs-variants.blade.php

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

<div class="ex-col ex-col--gap-lg">
    <div>
        <p class="ex-label">Pill</p>
        <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>
    </div>
    <div>
        <p class="ex-label">Segmented</p>
        <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>
    </div>
</div>

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 & Bar variants

Pill

Identity 2 Income 3 Review

Bar

Deductions Step 3 of 5

60%

stepper-variants.blade.php

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

<div class="ex-col ex-col--gap-lg">
    <div>
        <p class="ex-label">Pill</p>
        <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>
    </div>
    <div>
        <p class="ex-label">Bar</p>
        <x-pajak::stepper :variant="StepperVariant::Bar" :current="3" :total="5" label="Deductions" />
    </div>
</div>