Dropdown

Those menu thingies that show up when you click on something, letting you pick from a list of options, like choosing an action like Logout, My Profile.

Adding the component

php artisan spur:add interactives/dropdown interactives/dropdown-option

If you use this to add the component, it will automatically add it to config/spur.php and auto-fetch the components files.

config/spur.php
"components": [
  'interactives/dropdown',
  'interactives/dropdown-option',
]

If you manually add the component in config/spur.php you would need to run
php artisan spur:fetch to import the component

Usage

Simple Dropdown

Reply Forward Archive 
<x-spur.dropdown>
  <x-slot:trigger>
    <x-spur.button>Actions</x-spur.button>
  </x-slot>

  <x-spur.dropdown-option>Reply</x-spur.dropdown-option>
  <x-spur.dropdown-option>Forward</x-spur.dropdown-option>
  <x-spur.dropdown-option>Archive</x-spur.dropdown-option>
</x-spur.dropdown>

Dropdown Position

You can mix the position of left, right with top, bottom

Reply Forward Archive 
<x-spur.dropdown anchor="right top">
  <x-slot:trigger>
    <x-spur.button>Actions</x-spur.button>
  </x-slot>
      
  <x-spur.dropdown-option>Reply</x-spur.dropdown-option>
  <x-spur.dropdown-option>Forward</x-spur.dropdown-option>
  <x-spur.dropdown-option>Archive</x-spur.dropdown-option>
</x-spur.dropdown>

Match Trigger Width

You can set the dropdown menu to match the minimum width of the trigger by setting trigger-width attribute

Reply Forward Test 
<x-spur.dropdown trigger-width>
  <x-slot:trigger>
    <x-spur.button>Actions</x-spur.button>
  </x-slot>

  <x-spur.dropdown-option>Reply</x-spur.dropdown-option>
  <x-spur.dropdown-option>Forward</x-spur.dropdown-option>
  <x-spur.dropdown-option>Archive</x-spur.dropdown-option>
</x-spur.dropdown>

Disabled Option

You can disable any item by using the `disabled` attribute

Reply Forward Archive 
<x-spur.dropdown trigger-width>
  <x-slot:trigger>
    <x-spur.button>Actions</x-spur.button>
  </x-slot>

  <x-spur.dropdown-option>Reply</x-spur.dropdown-option>
  <x-spur.dropdown-option>Forward</x-spur.dropdown-option>
  <x-spur.dropdown-option disabled>Archive</x-spur.dropdown-option>
</x-spur.dropdown>

Avatar Trigger

Using Avatar as trigger

My Profile Settings Logout 
<x-spur.dropdown anchor="bottom right">
  <x-slot:trigger>
    <x-spur.avatar size="12" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&w=2970&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"/>
  </x-slot>

  <x-spur.dropdown-option>My Profile</x-spur.dropdown-option>
  <x-spur.dropdown-option>Settings</x-spur.dropdown-option>
  <x-spur.dropdown-option>Logout</x-spur.dropdown-option>
</x-spur.dropdown>

Customizing Style

You can adjust the styles of the dropdown to your liking using tailwind classes

My Profile Settings Logout 
<x-spur.dropdown anchor="bottom right" class="p-1 min-w-[200px]">
  <x-slot:trigger>
    <x-spur.button color="blue">Custom Dropdown</x-spur.button>
    </x-slot>
    <x-spur.dropdown-option class="hover:!bg-orange-500 rounded" href="/">My Profile</x-spur.dropdown-option>
    <x-spur.dropdown-option class="hover:!bg-red-500 rounded" href="/">Settings</x-spur.dropdown-option>
    <x-spur.dropdown-option class="hover:!bg-green-500 rounded" href="/">Logout</x-spur.dropdown-option>
</x-spur.dropdown>