Dropdown
The Dropdown component in Electrik Slate UI is a versatile and customizable component that allows users to display a list of actions or options in a dropdown menu. It supports various features like dark mode, customizable sizes, icons, and flexible positioning.
Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
label |
String | null |
The label for the dropdown trigger button. |
size |
String | md |
The size of the dropdown (sm, md, lg). |
color |
String | primary |
The color of the dropdown trigger button (primary, secondary, black, white, etc.). |
icon |
String | null |
An optional icon for the dropdown trigger button. |
position |
String | bottom-right |
Position of the dropdown menu (bottom-right, bottom-left, top-right, top-left). |
disabled |
Boolean | false |
Whether the dropdown is disabled. |
Examples
Basic Usage
The following example demonstrates a simple dropdown with a primary-colored trigger button and a list of actions.
<x-slate::dropdown label="Options" size="sm" color="black" icon="carbon-settings" position="bottom-right">
<x-slate::dropdown-item label="First Option" icon="carbon-user" />
<x-slate::dropdown-item label="Second Option" icon="carbon-user" description="This is a description." />
<x-slate::dropdown-item label="Third Option" icon="carbon-user" />
</x-slate::dropdown>
<x-slate::dropdown label="Options" size="lg" color="blue" icon="carbon-settings" position="bottom-left">
<x-slate::dropdown-item label="First Option" icon="carbon-user" />
<x-slate::dropdown-item label="Second Option" icon="carbon-user" description="This is a description." />
<x-slate::dropdown-item label="Third Option" icon="carbon-user" />
</x-slate::dropdown>
<x-slate::dropdown label="Options" size="sm" color="black" icon="carbon-settings" position="bottom-left">
<x-slate::dropdown-item label="Short Option" icon="carbon-user" size="sm" />
<x-slate::dropdown-item label="This is a very long option that should not break into multiple lines" icon="carbon-user" size="sm" />
<x-slate::dropdown-item label="Another Option" icon="carbon-user" size="sm" />
</x-slate::dropdown>
<p>Dropdown with Black and White Modes
This example showcases dropdowns using explicit black and white modes, which adapt correctly to dark mode:
<x-slate::dropdown label="Settings" icon="carbon-settings" color="black" size="xs">
<x-slate::dropdown-item label="Profile" icon="carbon-user-avatar" />
<x-slate::dropdown-item label="Logout" icon="carbon-logout" />
</x-slate::dropdown>
<x-slate::dropdown label="Options" icon="carbon-overflow-menu-horizontal" color="white" size="md">
<x-slate::dropdown-item label="Settings" icon="carbon-settings-adjust" />
<x-slate::dropdown-item label="Help" icon="carbon-help" />
</x-slate::dropdown>Dropdown with Descriptions
In this example, each dropdown item includes a description, providing additional context for the options:
<x-slate::dropdown label="More Options" icon="carbon-overflow-menu-horizontal" color="secondary" size="lg">
<x-slate::dropdown-item label="Profile" icon="carbon-user-avatar" description="View and edit your profile" />
<x-slate::dropdown-item label="Settings" icon="carbon-settings-adjust" description="Adjust your preferences" />
<x-slate::dropdown-item label="Logout" icon="carbon-logout" description="Sign out of your account" />
</x-slate::dropdown>Disabled Dropdown
This example shows a dropdown that is disabled:
Customization
The Dropdown component is highly customizable. You can adjust its size, color, and position to fit the needs of your application. Whether you need a simple dropdown for basic actions or a more complex one with descriptions and icons, the Dropdown component can accommodate your design requirements.
Positioning
You can control where the dropdown menu appears relative to the trigger button using the position prop:
-
bottom-right(default) -
bottom-left -
top-right -
top-left
Example:
Stay in Touch
Be the first to know about the latest releases and features.