Streamline the Laravel SaaS Starter Kit - Launch Your Next SaaS Today

Menu

Let your users navigate your website

x-t-menu
Slug: menu

Preview and Examples

<x-turbine-ui-menu
    variant="secondary"
>
    <li>
        <x-turbine-ui-nav-link variant="light" prefix="<i class='fa-solid fa-home'></i>">
            Home
        </x-turbine-ui-nav-link>
    </li>
    <li>
        <x-turbine-ui-nav-link variant="light" prefix="<i class='fa-solid fa-user'></i>">
            About
        </x-turbine-ui-nav-link>
    </li>
    <li>
        <x-turbine-ui-nav-link variant="light" prefix="<i class='fa-solid fa-envelope'></i>">
            Contact
        </x-turbine-ui-nav-link>
    </li>
    <li>
        <x-turbine-ui-nav-link variant="light" prefix="<i class='fa-solid fa-pencil'></i>">
            Blog
        </x-turbine-ui-nav-link>
    </li>
</x-turbine-ui-menu>

Attributes

Name Type Options Description
accent boolean
true false
Adds an accent
border boolean
true false
Adds a border
divide boolean
true false
Adds a divide between elements
hollow boolean
true false
Removes background colour
ring boolean
true false
Adds a ring
rounded boolean
true false
Adds rounded corners
shadow boolean
true false
Adds a shadow
size string
xs sm md lg xl 2xl
Controls component scale
variant string
default brand primary secondary success warning danger light dark
A variant is like a colour palette