View in Storybook
Anatomy
The base menu automatiically contains our ListItem component for consumers to customise.
- List items: A maximum of 20 list items are available to display in any menu.
Usage
Menu items are used in various ways across the product UI. Certain consistancies remain throughout each use to maintain visual balance and rhythm.
Alignment
Submenus always align precisely under the action item that has triggered them in navigations. There is no visual padding needed.
Dual menus
When a secondary navigational menu is displayed, this must retain the same width as main navigation and correct padding from the left.
Padding
Horizontal
When a dropdown menu appears below its affiliated action Select or Button, the padding between them is always 8px. We are also sympathetic to the alignment of these two components when used together. Text and icons both left and right aligned need to keep this visual alignment to meet our aesthetic rules.
Vertical
The vertical padding behaves differently. In these instances where submenus are required, the menu overlaps the primary menu so we keep the connection between the too. This overlap is -8px.
Indentations
When list items are nested within folders in a dropdown menu, we need to indicate this by providing indentation to these items. This padding is kept consistent to maintain vertical alignment of content.
Best practice
- Maintain consistent padding between Menu list items and any other components used.
- On short screens, the content within Menu becomes scrollable.
- We recommend a min-width of any menu of 240px and a max-width of 360px. These sizes are not fixed though.
Do's and Don'ts
|
Do |
Don't |
|---|---|
|
✅ Keep vertical and horizontal alignment of content regardless of what order the content is displayed. |
🚫 Make Menus too narrow in width. This ensures it doesn’t get confused with buttons or other controls. |
Also see