SideNav

Blade component for simple sidebar navigation with dropdown functionality.


Basic

In this component, we use two child components `sidenav-item` and `sidenav-sub-item`.

Note: If `sidenav-item` has an `href` prop and it's a single link, you must use a `label` prop for the link name. `slot` doesn't work!

Note: If `sidenav-item` has an `href` prop, the dropdown icon is not displayed.

<x-sidenav>
   <x-sidenav-item href="#home" label="Home" />
   <x-sidenav-item label="Services">
       <x-sidenav-sub-item href="#sub">All services</x-sidenav-sub-item>
   </x-sidenav-item>
   <x-sidenav-item href="#about" label="About" />
   <x-sidenav-item href="#contact" label="Contact" />
</x-sidenav>

Result


Active and active-class

You can use this `active` prop on `sidenav-item` and `sidenav-sub-item` and use the `active-class` prop to style it.

<x-sidenav>
    <x-sidenav-item
        active
        active-class="bg-pink-300 rounded hover:bg-pink-400"
        href="#home" label="Home" />
   ...
</x-sidenav>
<x-sidenav>
   ...
   <x-sidenav-item
        active active-class="bg-pink-200"
        label="Services">

        <x-sidenav-sub-item
            active
            active-class="bg-pink-300 rounded hover:bg-pink-400"
            href="#sub">
            All services </x-sidenav-sub-item>
   </x-sidenav-item>
   ...
</x-sidenav>

Result


© 2021, BladeTail-UI.

Made with by Deva