Newskit Logo

Navigation

Menu

A Menu displays a list of navigational items. They are displayed either at the top of a screen, or at the side where space allows.

Status

Supported

Introduced

v3.3.0
View code

Status

Supported

Introduced

Interactive Demo

This demo allows you to preview the Menu component, its variations, and configuration options.

Size
vertical
Align
Space Inline

Anatomy

A Menu contains one required element and three optional elements.

ItemNameDescriptionComponentOptional
1
Menu Item GroupCombines a number of ‘Menu Items’ and adds and optional title and a divider at the bottom.
Text Block
2
TitleTitle of the menu item group.
3
Menu ItemIncludes a label and an icon.
4
Menu DividerDivider as the last element or between a Menu Group or between Menu Items.

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

  • Center
    : Centers the Menu item label and icons.
  • Start
    : Aligns the Menu item label and icons to the left.
  • End
    : Aligns the Menu item label and icons to the right.

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.

  • menuItemVertical
    this is the default style applied when the menu is in a vertical orientation.
  • menuItemHorizonal
    this is the default style applied when the menu is in a horizontal orientation.
  • menuItemHorizontalInverse
    this is the default style applied when the menu is in a horizontal orientation on contrasting background colour.

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

  • Center
    : Centers the Menu item label and icons.
  • Start
    : Aligns the Menu item label and icons to the left.
  • End
    : Aligns the Menu item label and icons to the right.

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.

  • menuItemVertical
    this is the default style applied when the menu is in a vertical orientation.
  • menuItemHorizonal
    this is the default style applied when the menu is in a horizontal orientation.
  • menuItemHorizontalInverse
    this is the default style applied when the menu is in a horizontal orientation on contrasting background colour.

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.

Do not

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.

Do not

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.

Do not

Menu item labels shouldn’t be truncated. Keep them short, and fully visible.

Focus order
OrderElementRole
1
Menu ItemFocusses to the first Menu Item in the Menu.
2
Menu ItemFocusses to the next Menu item (if vertical orientation - item below and if horizontal orientation - item to the right).
Keyboard Interactions
CommandDescription
Tab
When focus is outside of the Menu it moves focus to the first Menu item. If focus is on a Menu item it moves focus to the next Menu item.
Shift
Tab
Moves focus to previous menu item.
Return or Space
Activates the Menu item if it was not already selected.
WAI-ARIA
ElementAttributeValueDescriptionUser Supplied
Menu
role
navigation
The navigation landmark role is used to identify major groups of links used for navigating through a website or page content. Aria: Navigation Role - Accessibility | MDN
Menu
aria-label
Labels should be short but descriptive, to allow users to distinguish between multiple menus on a web page.
MenuItem
aria-current
page
The
aria-current
attribute indicates the current page. The value
page
is incorporated into the screenreader announcement. Element.ariaCurrent - Web APIs | MDN
MenuDivider
role
separator
This is applied to the divider separating Menu Items Groups or Menu Items.
MenuGroup
aria-labelledby
auto-generated
When MenuGroup has title prop it link the title and menugroup with aria-labelledby.

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).

Menu
NameTypeDefaultDescriptionRequired
children
Exclude<React.ReactNode, 'undefined'>
A collection (array, component, JSX element) of Menu group, Menu items and Menu group divider components.
size
"small"
"medium"
"large"
MenuItemSize.medium
Defines the size of the Menu.
vertical
boolean
false
If true, changes the orientation of the Menu to vertical.
align
"start"
"end"
"center"
MenuItemAlign.start
Defines the alignment of the Menu items.
Menu Item Group
NameTypeDefaultDescriptionRequired
children
Exclude<React.ReactNode, 'undefined'>
A collection (array, component, JSX element) of Menu items belonged to this group and divider components.
title
React.ReactNode
inkSubtle
Title of item group.
aria-label
string
Defines the aria-label attribute of the title of the Menu item group title.
Menu Item
NameTypeDefaultDescriptionRequired
children
Exclude<React.ReactNode, 'undefined'>
Label and icon(s) of the Menu item.
aria-label
string
label
Defines the aria-label attribute of the Menu item.
disabled
boolean
false
If true, renders a Menu item in a disabled state.
href
string
If provided, will render the Menu item as a link.
eventOriginatorstring
string
This prop allows users to add event originator custom name.
eventContext
string
This prop allows users to add extra event data to click events.
onClick
function
Callback fired when menuItem is clicked.
selected
boolean
This prop set the menuItem to the selected state
Menu Divider
NameTypeDefaultDescriptionRequired

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.

FeatureDescriptionStatus
VariationsRelevant variations (style, size, orientation etc.)
Interactive statesAll interactive states that are applicable (hover, active, focus, focus, disabled, error etc).
Defined behavioursGuidelines for layout, animation, interactions, etc.
Usage guidelinesIncludes a list of dos and don’ts that highlight best practices and common mistakes to avoid.
Accessibility guidelinesFollows WCAG 2.0 standards (AA). Accessibility documentation defined including focus order, keyboard interactions and ARIA.
SEO guidelinesConforms to best practice SEO techniques. SEO considerations defined.
PropsDetails of component properties - their name, type, options, default, whether it’s required and their description have been defined.
Technical performance considerationsDetails on how this component may impact performance.
Available in UI kitIncluded within Figma Web Gallery file.
Design specificationsDetailed design specification including sizing, spacing and design tokens defined.
ThemesDisplays correctly across light and dark themes.

Need Help?

Cant find what you are looking for?

Cant find what you are looking for?