Dropdown menu button

Dropdown menu button in Storybook

Examples

The DropdownMenuButton component renders a button. When the user clicks the button, it renders a tree of any of the following:

• DropdownMenuLink
• DropdownMenuSeparator
• DropdownMenuHeader

Check out the Usage section for details about how to design a dropdown menu properly, and the different configuration options we provide.

Basic Example

The following example demonstrates how to create a simple DropdownMenuButton component.

<DropdownMenuButton
  buttonText="Menu"
  id="dropdown-menu-button">
  <DropdownMenuLink>First menu item</DropdownMenuLink>
  <DropdownMenuLink>Second menu item</DropdownMenuLink>
  <DropdownMenuLink>Third menu item</DropdownMenuLink>
</DropdownMenuButton>

Headers and separator example

You can use headers and separators to create separation between groups of options.

<DropdownMenuButton
  buttonText="Menu"
  id="dropdown-menu-button">
  <DropdownMenuLink>First menu item</DropdownMenuLink>
  <DropdownMenuLink>Second menu item</DropdownMenuLink>
  <DropdownMenuSeparator />
  <DropdownMenuLink>Separated menu item</DropdownMenuLink>
  <DropdownMenuSeparator />
  <DropdownMenuHeader title="Header text">
    <DropdownMenuLink>First header menu item</DropdownMenuLink>
    <DropdownMenuLink>Second header menu item</DropdownMenuLink>
  </DropdownMenuHeader>
</DropdownMenuButton>

Drop up example

You can use the dropUp property to render the menu above the button when clicked.

<DropdownMenuButton
  buttonText="Menu"
  id="dropdown-menu-button"
  dropUp={true}>
  <DropdownMenuLink>First menu item</DropdownMenuLink>
  <DropdownMenuLink>Second menu item</DropdownMenuLink>
  <DropdownMenuLink>Third menu item</DropdownMenuLink>
</DropdownMenuButton>

Usage

Coming soon.

Code

<DropdownMenuButton
  buttonText="Menu"
  id="dropdown-menu-button">
  <DropdownMenuLink>First menu item</DropdownMenuLink>
  <DropdownMenuLink>Second menu item</DropdownMenuLink>
  <DropdownMenuLink>Third menu item</DropdownMenuLink>
</DropdownMenuButton>

Import statement

import {
  DropdownMenuHeader,
  DropdownMenuButton,
  DropdownMenuSeparator,
} from '@jutro/components';
import { DropdownMenuLink } from '@jutro/router';

Component contract

Make sure to understand the Design System components API surface, and the implications and trade-offs. Learn more in our introduction to the component API.

Properties

idrequired

Type

string

Description

Unique identifier for the component.

alignRight

Type

boolean

Description

If set to true, the menu items are aligned to the right edge of the menu.

autoFocus

Type

boolean

Description

If set to true, the first menu item gets focused after opening the dropdown menu.

buttonText

Type

IntlMessageShape

Description

The text displayed on the button.

dropUp

Type

boolean

Description

If set to true, the menu appears above the trigger component.

fullWidth

Type

boolean

Description

If set to true, expands button container to parent's boundaries.

icon

Type

string | Icon

Description

An Icon component to render on the component. The value must be an Icon component or the icon's name. For example, CheckIcon or 'gw-check'.

isOpen

Type

boolean

Description

If set to true, the menu is currently opened.

menuClassName

Type

string

Description

Override the class for the inner menu of the dropdown menu.

toggleButtonClassName

Type

string

Description

Custom class name for the toggle button.

Dropdown menu child properties

Dropdown menu components use DropdownMenuHeader, DropdownMenuLink and DropdownMenuSeparator as child components. The properties for these components are as follows:

DropdownMenuHeader properties

children

Type

React.ReactNode

Description

The component children, wrapped by the dropdown menu header component.

id

Type

string

Description

Unique identifier for the component.

title

Type

React.ReactNode | IntlMessageShape

Description

The element node representing the header title, in most cases it will be a plain string.

DropdownMenuLink properties

activeClassName

Type

string

Description

The class to give the link when it is active.

children

Type

string

Description

The children elements to render inside of the DropdownMenuLink.

className

Type

string

Description

CSS class name for this component.

disabled

Type

boolean

Description

If set to true, this link is disabled.

focused

Type

string

Description

If set to true, the link is considered as the currently active one.

href

Type

IntlMessageShape

Description

Used to specify an external link.

icon

Type

string | Icon

Description

An Icon component to render on the component. The value must be an Icon component or the icon's name. For example, CheckIcon or 'gw-check'.

iconClassName

Type

string

Description

Additional class names for the icon.

iconPosition

Type

'left' | 'right'

Description

Where the icon is placed relative to the text.

id

Type

string

Description

Unique identifier for the component.

onClick

Type

function (React.MouseEvent<HTMLElement>)

Description

On click event handler.

rel

Type

string

Description

Specifies the relationship between the current and an external document, like the HTML rel attribute.

target

Type

string

Description

Specifies where to open the external link, like the HTML target attribute.

to

Type

IntlMessageShape | {pathname?, hash?}

hash

Type

IntlMessageShape

Description

Hash to put in the URL.

pathname

Type

IntlMessageShape

Description

Link path.

Description

Used to specify an internal link.

visible

Type

boolean

Description

If set to true, this link is visible.

DropdownMenuSeparator properties

className

Type

string

Description

CSS class name for this component.

id

Type

string

Description

Unique identifier for the component.

Hooks

No hooks are available for Dropdown menu.

Translation keys

There are no translations for Dropdown menu.

For information on how to manage translations, see our section about Internationalization.

Escape hatches

For more information, see our documentation about escape hatches.

Use of deprecated button component

The button component in the dropdown menu button uses the deprecated button component from prior to version 10.0. Consequently, it might look and behave differently than other buttons in your application. Details for this legacy component is available in Storybook.

If you wish to enforce consistency, we recommend creating a custom version by combining the stable button component with a dropdown menu

Changelog

10.10.1

Additional design tokens were added for this component.

10.9.0

• A new opt-in feature was introduced that disables automatic event publishing for the DropdownMenuButton component. You can enable this feature by adding JUTRO_DISABLE_AUTO_EVENTS_PUBLISHING=true to the .env file in the root of your Jutro application. When this is enabled, legacy components no longer publish events by default. For more information on events and how to set up new events, see the Events documentation.

icon property type extended

The type of the icon property has been extended to string | React.ComponentType.

Deprecations

Passing a string as a value to the icon property has been deprecated.