The dropdown component can be used to show a list of menu items when clicking on an element such as a button and hiding it when clicking outside of the triggering element.
Setup # Examples #If you want to show a dropdown menu when clicking on an element add the Dropdown and DropdownItem components.
Utilize the href prop within the DropdownItem component to incorporate a hyperlink. To initiate the application of the active class, include the activeUrl prop within the Dropdown component:
To change the active class, use the activeClass prop:
You can use the DropdownDivider component to add separate elements inside the dropdown menu. Note that you have a natural divider between main content of the Dropdown and its header and footer.
Use this example to show extra information outside of the list of menu items inside the dropdown.
Multi-level dropdown #Use this example to enable multi-level dropdown menus by adding stacked elements inside of each other.
A11y #Use Tab and Shift+Tab to navigate between buttons or links in the dropdown. Press ESC to close it.
When you want to control your dropdown open status via javascript code you can bind to open property.
Current dropdown state: Closed
Dropdown with checkbox #Add multiple checkbox elements inside your dropdown menu to enable more advanced input interaction.
Background hover #Use this example to update the background color of a menu item when using a list of checkbox elements.
Helper text #Add an extra helper text to each checkbox element inside the dropdown menu list with this example.
Dropdown with radio #Add multiple radio elements inside your dropdown menu to enable more advanced input interaction.
Background hover #Use this example to update the background color of a menu item when using a list of radio elements.
Helper text #Add an extra helper text to each radio element inside the dropdown menu list with this example.
Dropdown with toggle switch #Show a list of toggle switch elements inside the dropdown menu to enable a yes or no type of choice.
Dropdown navbar #You can also use the dropdown element inside a navigation bar and add a second level of navigation hierarchy, but make sure to use Navbar components.
Dropdown with scrolling #This example can be used when you want to show a long list of items that wonât affect the height of the dropdown menu by enabling a scrolling behaviour.
Dropdown with search #Use this example if you want to add a search bar inside the dropdown menu to be able to filter through a long list of menu items with scrolling behaviour.
Menu icon #Use the menu icon trigger element on components such as cards as an alternative element to the button.
Notification bell #Use this example to show a list of notifications inside your application by providing more detailed information such as the user avatar, content and time of notification triggered by a notification bell icon.
User avatar #This example can be used to show a list of menu items and options when a user is logged into your application.
Avatar with name #Use this example to also show the name or email of the user next to the avatar for the dropdown menu.
Sizes #The dropdown menus work with buttons of all sizes including smaller or larger ones.
Placement #You can also use the placement={top|right|bottom|left} options to choose the placement of the dropdown menu. By default the positioning is set to the bottom side of the button.
As dropdown is implemented using the Floating UI library, placement can be further specified by using the Placement type defined in Floating UI docs
Since the Dropdown component extends Popper, it also supports the transition and transitionParams props for customizing animations.
DropdownItem renders to link or button or div wrapped with <li/> element depending whether you supplied the href or onclick property.
The component has the following props, type, and default values. See types page for type information.
References #RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4