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

Dropdown

Show/hide content beneath a button

x-t-dropdown
Slug: dropdown

Preview and Examples

<x-t-dropdown target="default" class="z-10">
    <x-t-button>Default Dropdown</x-t-button>
    <x-slot:content>
        <x-turbine-ui-list-group border="false" class="p-0">
            <x-turbine-ui-nav-link prefix="<i class='fa-solid fa-home'></i>" size="sm">Home</x-turbine-ui-nav-link>
            <x-turbine-ui-nav-link prefix="<i class='fa-solid fa-user'></i>" size="sm">About</x-turbine-ui-nav-link>
            <x-turbine-ui-nav-link prefix="<i class='fa-solid fa-envelope'></i>" size="sm">Contact</x-turbine-ui-nav-link>
            <x-turbine-ui-nav-link prefix="<i class='fa-solid fa-pencil'></i>" size="sm">Blog</x-turbine-nav-ui-link>
        </x-turbine-ui-list-group>
    </x-slot:content>
</x-t-dropdown>

Attributes

Name Type Options Description
accent boolean
true false
Adds an accent
border boolean
true false
Adds a border
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