Anatomy
A Menu contains one required element and three optional elements.
| Item | Name | Description | Component | Optional |
|---|
Options
A Menu has options that can be used to provide an appropriate experience for different use cases.
Orientation
A Menu can be displayed horizontally or vertically to effectively and appropriately use the space on a screen.
Title
A title can be displayed in a Menu Item Group above the Menu items. This could be used for categorising Menu items.
This is only available when a Menu is in a vertical orientation.
Menu Divider
Dividers can be displayed as the last element between Menu Groups or between Menu Items.
Icons (leading & trailing)
Icons can be displayed in Menu Item Group titles as well as Menu Items and can be positioned either before (leading) or after (trailing) the label.
Alignment
- : Centers the Menu item label and icons.Center
- : Aligns the Menu item label and icons to the left.Start
- : Aligns the Menu item label and icons to the right.End
Note
Default value depends on the vertical prop: when is True the value is set to MenuItemAlign.Start, and MenuAlign.Center when is False.
Size
There are three sizes of the Menu item: small, medium, and large. Menu item label, icon, and the menu container change size. Menu matches the same height as three button sizes, to align when used together.
Style
There are three default styles that can be mapped based on their orientation and application.
- this is the default style applied when the menu is in a vertical orientation.menuItemVertical
- this is the default style applied when the menu is in a horizontal orientation.menuItemHorizonal
- this is the default style applied when the menu is in a horizontal orientation on contrasting background colour.menuItemHorizontalInverse
Orientation
A Menu can be displayed horizontally or vertically to effectively and appropriately use the space on a screen.
Title
A title can be displayed in a Menu Item Group above the Menu items. This could be used for categorising Menu items.
This is only available when a Menu is in a vertical orientation.
Menu Divider
Dividers can be displayed as the last element between Menu Groups or between Menu Items.
Icons (leading & trailing)
Icons can be displayed in Menu Item Group titles as well as Menu Items and can be positioned either before (leading) or after (trailing) the label.
Alignment
- : Centers the Menu item label and icons.Center
- : Aligns the Menu item label and icons to the left.Start
- : Aligns the Menu item label and icons to the right.End
Note
Default value depends on the vertical prop: when is True the value is set to MenuItemAlign.Start, and MenuAlign.Center when is False.
Size
There are three sizes of the Menu item: small, medium, and large. Menu item label, icon, and the menu container change size. Menu matches the same height as three button sizes, to align when used together.
Style
There are three default styles that can be mapped based on their orientation and application.
- this is the default style applied when the menu is in a vertical orientation.menuItemVertical
- this is the default style applied when the menu is in a horizontal orientation.menuItemHorizonal
- this is the default style applied when the menu is in a horizontal orientation on contrasting background colour.menuItemHorizontalInverse
States
A Menu has states including, base, hover, active, disabled and focus. They can be displayed with both, base or selected. By default, a Menu has one menu item in a selected state.
Base
Menu items have a base state. This is the base style of the Menu item before it has been interacted with by a user.
Hover
Menu items have a hover state. The style of the Menu item changes to visually communicate and provide feedback to the user that the Menu item is an interactive element.
Active
Menu items have an active state. The style of the Menu item changes to visually communicate and provide feedback to the user that the Menu item has been interacted with.
Disabled
Menu items in a disabled state communicate that a Menu item exists, but is not available to the user in that scenario. When the user’s cursor hovers over a Menu item in a disabled state, the cursor shows as not-allowed. Disabled Menu items are often used to maintain layout consistency and communicate that a Menu item may become available if another condition has been met.
Focus
Menu items in a focus state communicate that a user has highlighted a Menu item, using an input method such as a keyboard or voice.
Selected
Menu items have a selected state. The style of the Menu item changes to visually communicate and provide feedback to the user that the Tab item has been selected.
Behaviours
A Menu has the following component functions when integrated into a product.
Width and Height
A Menu is 100% width and height, therefore if a specific width or height is required a parent container will control this.
Transitions
When the user hovers over a Menu item, the style transitions from one state to another.
Selected
Only one Menu item can be selected at any given time.
Label Overflow
When the label in a Menu title or Menu item is too long for the available horizontal space, they wrap to form another line.
Width and Height
A Menu is 100% width and height, therefore if a specific width or height is required a parent container will control this.
Transitions
When the user hovers over a Menu item, the style transitions from one state to another.
Selected
Only one Menu item can be selected at any given time.
Label Overflow
When the label in a Menu title or Menu item is too long for the available horizontal space, they wrap to form another line.
Usage
The following guidance describes how and when to appropriately use a Menu component.
Do
Use a Menu to navigate to different top level sections or sub-sections.
Don’t
Use a Menu to open content panes within a page.
Do
When using a Menu you should be mindful of the number of items you’re displaying, helping readability and also reducing the cognitive load.
Don’t
All Menu items should be consistent in size e.g. small, medium or large Menu item. This is to ensure Menu items have equal importance.
Do
Menu item labels should be in sentence case. This helps with scannability and legibility.
Don’t
Menu item labels shouldn’t be truncated. Keep them short, and fully visible.
Accessibility Considerations
Menus implement the latest WAI-ARIA Menu specifications..
| Order | Element | Role |
|---|
| Command | Description |
|---|
| Element | Attribute | Value | Description | User Supplied |
|---|
SEO Considerations
The rendered menu is build using a native HTML nav element, this should ensure that it is easily for crawlers to discover. Navigational Items should have clear descriptive titles to allow crawlers to correctly identify content.
API
There are props on the three components that combine to form the Menu component (Menu, Menu Item Group, Menu Item).
| Name | Type | Default | Description | Required |
|---|
| Name | Type | Default | Description | Required |
|---|
| Name | Type | Default | Description | Required |
|---|
| Name | Type | Default | Description | Required |
|---|
Compliance
All of the components in the NewsKit design system go through a comprehensive set of checks to ensure that we are producing compliant and best practice components.
| Feature | Description | Status |
|---|