# 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>