Dropdown menu | Parsley Design System

Examples

Default - items as object

Code

1<DropdownMenu label="A content revealing button" width="m" items={[
2    { text: 'A First name', onClick: () => {} },
3    { text: 'Email address', href: 'http://www.google.com.au', onClick: () => {} },
4    { id: 'counry-of-origin', text: 'Country of Origin', onClick: () => {} },
5]} />

Output as MenuItem component children

Code

1<DropdownMenu label="A content revealing button" width="m">
2    <MenuItem onClick={() => {}}>this is 1</MenuItem>
3    <MenuItem onClick={() => {}} href="https://www.google.com">this is 2</MenuItem>
4    <MenuItem onClick={() => {}}>this is 3</MenuItem>
5    <MenuItem onClick={() => {}}>this is 4</MenuItem>
6</DropdownMenu>

Icons only display

Code

1<DropdownMenu label="A content revealing button" width="m" labelHidden>
2    <MenuItem onClick={() => {}}>this is 1</MenuItem>
3    <MenuItem onClick={() => {}} href="https://www.google.com">this is 2</MenuItem>
4    <MenuItem onClick={() => {}}>this is 3</MenuItem>
5    <MenuItem onClick={() => {}}>this is 4</MenuItem>
6</DropdownMenu>
7
8<DropdownMenu label="A content revealing button" width="m" iconType="more" labelHidden>
9    <MenuItem onClick={() => {}}>this is 1</MenuItem>
10    <MenuItem onClick={() => {}} href="https://www.google.com">this is 2</MenuItem>
11    <MenuItem onClick={() => {}}>this is 3</MenuItem>
12    <MenuItem onClick={() => {}}>this is 4</MenuItem>
13</DropdownMenu>

Different sizes

Code

1<DropdownMenu label="A content revealing button" width="m" size="small">
2    ...
3</DropdownMenu>
4
5<DropdownMenu label="A content revealing button" width="m" size="default">
6    ...
7</DropdownMenu>
8
9<DropdownMenu label="A content revealing button" width="m" size="large">
10    ...
11</DropdownMenu>
12
13<DropdownMenu label="A content revealing button" width="m" size="xlarge">
14    ...
15</DropdownMenu>

Different menu sizes

Code

1<DropdownMenu label="A content revealing button" width="m" menuSize="small">
2    ...
3</DropdownMenu>
4
5<DropdownMenu label="A content revealing button" width="m">
6    ...
7</DropdownMenu>
8
9<DropdownMenu label="A content revealing button" width="m" menuSize="large">
10    ...
11</DropdownMenu>

Different widths

Code

1<DropdownMenu label="A content revealing button" width="small">
2    ...
3</DropdownMenu>
4
5<DropdownMenu label="A content revealing button">
6    ...
7</DropdownMenu>
8
9<DropdownMenu label="A content revealing button" width="large">
10    ...
11</DropdownMenu>
12
13<DropdownMenu label="A content revealing button" width="xlarge">
14    ...
15</DropdownMenu>

Different border widths

Code

1<DropdownMenu label="A content revealing button" borderWidth="small">
2    ...
3</DropdownMenu>
4
5<DropdownMenu label="A content revealing button">
6    ...
7</DropdownMenu>

Open menu by default

this is 2

Code

1<DropdownMenu label="A content revealing button" open>
2    ...
3</DropdownMenu>

Disabled control

Code

1<DropdownMenu label="A content revealing button" disabled>
2    ...
3</DropdownMenu>

Disabled menu items

Code

1<DropdownMenu label="A content revealing button">
2    <MenuItem disabled onClick={() => {}}>this is 3</MenuItem>
3</DropdownMenu>

Menu button context

Code

1<DropdownMenu label="A content revealing button" labelContext="menu button context here">
2    ...
3</DropdownMenu>

Design

Dropdown menu displays a list of contextual actions relevant to nearby content. The Dropdown Menu component applies progressive disclosure by hiding contextual actions until requested by the user.

Problem

As a customer, I want to view actions relevant to my current task.
As a designer, I want to hide contextual actions and only present them to a user when requested by the user.

Solution

Display a Dropdown Menu component that provides a clear label and when interacted with allows a user to view actions in context with their current task.

Guidance

Use short, meaningful button labels
Use active descriptive verbs for your labels such as ‘Save’ or ‘Continue’.
Use sentence case for all button labels
Dropdown menus are typically used when you have 3 to 10 items to choose from.
Action items are used for navigation or commands, where an action is initiated based on the selection.
When organizing dropdown menu items, sort the list in a logical order preferably alphabetically ascending or alternatively by putting the most selected options at the top.
Don't use the Dropdown Menu for form inputs or selects, instead use the Select List component.
Don't hide a primary action, instead the Button Menu component should be used to ensure the primary action is visible by default.
Don't nest other elements or components insider the Dropdown Menu, only the MenuItem component is to be nested within.

Development

Import by:

1import { DropdownMenu } from '@parsley_design_systems/design-system'

Available props for Dropdown Menu

Props for the Dropdown Menu component
Property	Type	Default	Required	Description
children	ReactNode		true	Expects multiple MenuItem component children
items	Object		true	Allows the props available in the MenuItem component.
size	oneOf: default \| small \| large \| xlarge	default	false	Sets the size of the component. If not set "default" is output as the default setting.
menuSize	oneOf: default \| small \| large	default	false	Sets the size of the action items (MenuItem). If not set "default" is output as the default setting.
className	string		false	Allows for specific classNames to be set.
label	string		true	The content to display within the button.
labelHidden	boolean		false	Whether to display the label text next to the selected icon.
iconType	oneOf: more \| chevron	chevron	false	Whether to display more icon or the more traditional chevrown down icon.
onClick	function		true \| false	Allows for an additional action to be fired when the DropDown Menu button is clicked to open the menu.
open	boolean		false	Allows for the menu to be expanded by an external action.
borderWidth	oneOf: small, medium	medium	false	Sets the button and menu container border width.
width	oneOf: small \| default \| large \| xlarge - See Sizing for form width tokens.	default	false	Sets the width of the menu item container.
disabled	boolean		false	A boolean that turns the element into a disabled state.
labelContext	string		false	Allows for additional instructions to be inserted into the element, this content is visually hidden and can be used to provide additional context to the element for assistive technolgy users.
ref	string		false	Allows a ref to be set on the button \| link.

Available props for the Menu Item

Props for the Menu Item component
Property	Type	Required	Description
text	ReactNode	true	The content to display in the action.
className	string	false	Allows for specific classNames to be set.
href	string	true when element is an 'a'.	A href is required when setting the element type as an anchor (a), the value passed needs to be a URL string.
onClick	function	true \| false	Allows for an additional action to be fired when the DropDown Menu button is clicked to open the menu.
disabled	boolean	false	A boolean that turns the element into a disabled state.
labelContext	string	false	Allows for additional instructions to be inserted into the element, this content is visually hidden and can be used to provide additional context to the element for assistive technolgy users.
id	string	true	The unique id of the button.
ref	string	false	Allows a ref to be set on the button \| link.