Tailwind CSS Speed Dial - Flowbite

Get started with the speed dial component to show a list of buttons or menu items positioned relative to the body in either corner as a quick way to allow certains actions to be made by your users.

This component can be easily customized by changing the colors, text, icons, sizes, alignment, and even positioning using our examples built with Tailwind CSS and making use of Flowbite’s JavaScript API.

Make sure that you have the Flowbite JS file included in your application by following our quickstart guide.

Default speed dial #

To initialize a speed dial component you need to wrap the trigger element and the list of items inside an element and use the data-dial-init data attribute on it.

Furthermore, make sure that the trigger button element has the data-dial-toggle="{targetElementId}" where the value is the ID of the target element.

Square speed dial #

Use this example to make the trigger button’s style square instead of a full circle using the rounded-lg utility class.

Text inside button #

This example can be used to show the descriptive text inside the button instead of a tooltip.

Text outside button #

Use this example to show the text of each button outside of the speed dial as an alternative style.

Dropdown menu #

This example can be used to show a list of menu items instead of buttons when activating the speed dial.

Alternative menu #

This example can be used to show an alternative style when showing a list of menu items.

Positioning #

The positioning of the speed dial component relative to the body element can be easily done by using the positioning utility classes from Tailwind CSS.

Top right #

Use the top-{*} and right-{*} utility classes to set the position of the speed dial component to the top right side of the document body.

Bottom right #

Use the bottom-{*} and right-{*} utility classes to set the position of the speed dial component to the bottom right side of the document body.

Bottom left #

Use the bottom-{*} and left-{*} utility classes to set the position of the speed dial component to the bottom left side of the document body.

Top left #

Use the top-{*} and left-{*} utility classes to set the position of the speed dial component to the top left side of the document body.

Alignment #

The alignment of the speed dial menu items and buttons can be set using the flexbox utility classes from Tailwind CSS.

Vertical #

The default alignment of the menu items of the speed dial is vertical using the flex-col utility class.

Horizontal #

Horizontally align the speed dial menu items by using the flexbox utility classes from Tailwind CSS.

Triggering #

Use the data-dial-trigger="{click|hover}" data attributes on the trigger element inside of the speed dial component to set which type of action should activate the speed dial: click or hover.

Hover #

The default trigger type is hover for each speed dial component.

Click #

If you want the speed dial component to activate when clicking instead of hovering over the trigger element then you need to set the click value inside of the data-dial-toggle="click" data attribute on the trigger element.

JavaScript behaviour #

The Speed Dial API from Flowbite can be used to create an object in JavaScript to set up the options, methods, and behaviour of a speed dial component manually.

Object parameters #

Create a new Speed Diual object with the object parameters like the trigger element, the target element, and the other options such as the trigger type.

Options #

Use the following options as the third parameter for the Speed Dial object to set the trigger type (hover or click).

Methods #

Use the methods from the Speed Dial object to programmatically show or hide the component from directly JavaScript.

Example #

Use following JavaScript as an example to learn how to initialize, set the options, and use the methods for the Speed Dial object.

Three arguments are required for the Speed Dial component, namely the parent element, trigger element, and the target element.

Furthermore, you can also pass an object of options to set the trigger type and set the callback functions.

Create a new Speed Dial object based on the options above.

Use the show, hide, or toggle methods on the Speed Dial object to programmatically show and hide the speed dial component using JavaScript.

HTML Markup #

Use the following HTML code for the JavaScript example above.

TypeScript #

If you’re using the TypeScript configuration from Flowbite then you can import the types for the Speed Dial class, parameters and its options.

Here’s an example that applies the types from Flowbite to the code above: