BladeTail UI

home
v2 Docs
Livewire Data-table

Nav

Blade component for simple navigation.


Basic

<x-nav>
    <x-nav-item href="#home">Home</x-nav-item>
    <x-nav-item href="#services">Services</x-nav-item>
    <x-nav-item href="#about">About</x-nav-item>
    <x-nav-item href="#contact">Contact</x-nav-item>
</x-nav>

Result


Align

Nav alignment options: Start, Center, End.

<x-nav start >
    <x-nav-item href="#home">Home</x-nav-item>
    ...
</x-nav>
<x-nav center >
    <x-nav-item href="#home">Home</x-nav-item>
    ...
</x-nav>
<x-nav end >
    <x-nav-item href="#home">Home</x-nav-item>
    ...
</x-nav>

Result


Size

Size options: sm, default.

<x-nav sm >
    <x-nav-item href="#home">Home</x-nav-item>
    ...
</x-nav>
<x-nav >
    <x-nav-item href="#home">Home</x-nav-item>
    ...
</x-nav>

Result


Active and Active Class

Place `active` property in nav item and add css with `active-class` property.

<x-nav>
   ...
   <x-nav-item active href="#services">Services</x-nav-item>
   ...
</x-nav>

<x-nav>
   ...
   <x-nav-item
    active
    active-class="bg-pink-500 text-white"
    href="#services">
        Services </x-nav-item>
   ...
</x-nav>

Result

Home
Livewire DataTable
blog

© 2021, BladeTail-UI.

Made with by Deva

Build with Laravel, TailwindCSS, Livewire and AlpineJS