A blade component for simple navigation!

This nav component has all the basic structure and style. It is designed to be easy to use everywhere. This component has five types of attributes with default values.

We will see it one by one!

# Total

This attribute defines how many slots want to generate in the component. So, this is the required one!

If your total links are 4, define the total attribute value 4. After that component will generate 4 slots with the name like link1, link2, link3, link4. You can't use more than one link per slot.

Add active css class for active link!

<x-btui-nav total="4" axis="x" size="md" color="blue" class="">     <x-slot name="link1">    <a href="#" class=""> Home</a>   </x-slot>     <x-slot name="link2">    <a href="#" class="active"> Services</a>   </x-slot>     <x-slot name="link3">    <a href="#" class=""> Portfolio</a>   </x-slot>     <x-slot name="link4">    <a href="#" class=""> Profile</a>   </x-slot> </x-btui-nav> 


# Axis

This attribute defines the direction of the navigation like horizontal or vertical! x means horizontal and y means vertical.

<x-btui-nav total="4" axis="x"> </x-btui-nav> 

# Size

This attribute defines the size of the navigation links such as sm, md, lg, xl and the default value is md

<x-btui-nav total="4" size="md"> </x-btui-nav> 

# Color

This attribute defines the hover and active color of the navigation link. This component has 10 primary colors like gray, blue, green, etc. The default value is blue

<x-btui-nav total="4" color="gray"> </x-btui-nav> 

# Class

This attribute defines the background style of the navigation. You can use Tailwind CSS classes here.

<x-btui-nav total="4" color="gray"> </x-btui-nav> 

Change the Options and See what happens!


See available options! (* means required)

name type default options
Total* Integer 0 -
Axis String x x or y
Size String md sm,md,lg,xl
Color String blue gray, green, red, pink, yellow, indigo, blue, purple
Class String - -