Skip to main content

DropdownMenu 🗑️

Deprecated

This component is deprecated. Use the Dropdown component instead. If you need any help with the migration, take a look in our migration guide.

The DropdownMenu is a floating list that allows interaction on one or more items. A DropdownMenu can contain simple lists, navigation between listings and other components, allow filtering or sorting of content or the selection of one or more options from a list in a form.

The DropdownMenu is only opened after interacting with another component, called "trigger".

Min and max width​

The minimum width of a DropdownMenu is 160 pixels.

The max width depends on the maximum size of your inner elements and the constraints of each context.

List items​

Text​

They should have a main text to describe the item succinctly. If necessary, a supporting text can complement the main text.

Very long text in an item may contain an ellipsis (“...”), followed by a Tooltip to show the complete information.

Icon​

Decorative icons, which reinforce the meaning of an item, should always appear to the left of the label. Icons add complexity and can impact reading options, so use only when really necessary.

Tag​

Item types​

danger

Items are still under development. Once they are complete, the update will be done here on Tangram.

Selectable​

Allow the selection of one or more options at the same time.

Single selection​

Use for cases where only one option can be selected.

Multi selection​

Use in cases where 2 or more options can be selected.

Critical​

Specific items for critical actions such as removing system information.

Navigation​

Items that allow navigation between lists or contents within the same DropdownMenu.

Dividers​

Non-clickable items, which allow you to separate or group items.

Line​

Visually separates items by just one line.

Title​

Separates items with a section title.

Heading​

The DropdownMenu may have a special area at the top for components or elements that add functions. The Search and Tabs components can be applied to the header.

The DropdownMenu can also have a special area below the dropdown list, for specific components and elements. Buttons must appear separated from the list by a dividing line, so use the secondary button to not conflict with primary actions.

Feedback​