Sidenav
A blade component for Sidebar Navigation!
This sidenav component has all the basic structure and style. It is designed for specifically the admin area navigation. This component has two types of attributes with default values.
We will see it one by one!
# Sections
In this sidenav component, we use the sections to group the links and all links are must be in the section. Even If you want to put a link, that also should be in a separate section.
Sections name must be a string. section name and total links are required and must be separated by a colon (:). If you want more sections, simply add them followed by a comma (,).
sections='section-name:total-links'
sections="menu:1,shop:2,profile:3"After that, you can put the link in the slots. the slots are generated by the section name with the number. If the section's total links are 3 then three slots generated with a number like this section1, section2, section3
Note: If one link in the section, the slot generated without a number!
See the full Example:
<x-btui-sidenav sections="main:1,shop:2"> <x-slot name="main"> <a href="#"> Dashboard </a> </x-slot> <x-slot name="shop1"> <a href="#"> Products </a> </x-slot> <x-slot name="shop2"> <a href="#"> Orders </a> </x-slot> </x-btui-sidenav> # Color
10 Primary colors and 8 light shade colors available for this component!
<x-btui-sidenav sections="main:1,shop:2" color="light-green"> </x-btui-sidenav> See available options! (* means required)
| name | type | default | options |
|---|---|---|---|
| Sections* | String | - | - |
| Color | String | light-green | gray, light-gray, green, light-green, red, light-red, pink, light-pink, yellow, light-yellow, indigo, light-indigo, blue, light-blue, purple, light-purple, white, black |
