Navigation

Status

Supported

Introduced

v3.3.0

View code

Status

Supported

Introduced

v3.3.0

View code

Interactive Demo

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

1import React from 'react';
2import { Menu } from 'newskit';
3
4export default () => (
5  <Menu size="medium" align="center" overrides={{}} />
6);
7

Anatomy

A Menu contains one required element and three optional elements.

Item	Name	Description	Component
1	Menu Item Group	Combines a number of ‘Menu Items’ and adds and optional title and a divider at the bottom.	Text Block Icon
2	Title	Title of the menu item group.	Text Block Icon
3	Menu Item	Includes a label and an icon.	Text Block Icon Block Link
4	Menu Divider	Divider as the last element or between a Menu Group or between Menu Items.	Divider

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

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.

Accessibility Considerations

Menus implement the latest WAI-ARIA Menu specifications..

Focus order

Order	Element	Role
1	Menu Item	Focusses to the first Menu Item in the Menu.
2	Menu Item	Focusses to the next Menu item (if vertical orientation - item below and if horizontal orientation - item to the right).

Keyboard Interactions

Command	Description
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

Element	Attribute	Value	Description
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).

Name	Type	Default	Description
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.

Attribute	Type	Default	Description
menu .spaceInline	MQ<string>	space020	Overrides the space between Menu Items.

Menu Item Group

Name	Type	Default	Description
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.

Attribute	Type	Default	Description
menuGroup .title .typographyPreset	MQ<string>	utilityHeading030	Overrides the typographyPreset of the title.
menuGroup .title .stylePreset	MQ<string>	inkSubtle	Overrides the stylePreset of the title.
menuGroup .title .spaceInline	MQ<string>	space050	Overrides the space between title and the first Menu Item.
menuGroup .title .spaceInset	MQ<string>	space050	Overrides the indentation of the title.
menuGroup .spaceInline	MQ<string>	space050	Defines the space between MenuGroup.
menuGroup .stylePreset	MQ<string>		Overrides the stylePreset of the MenuGroup.

Menu Item

Name	Type	Default	Description
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

Attribute	Type	Default	Description
menuItem .vertical .minHeight	MQ<string>	sizing080	Overrides the minHeight of the Menu Item.
menuItem .horizontal .minHeight	MQ<string>	sizing080	Overrides the minHeight of the Menu Item.
menuItemIcon .vertical .iconSize	MQ<string>	iconSize020	Overrides the iconSize of the Menu Item.
menuItemIcon .horizontal .iconSize	MQ<string>	iconSize020	Overrides the iconSize of the Menu Item.
menuItem .vertical .stylePreset	MQ<string>	menuItemVertical	Overrides the stylePreset of the icon, label and background of the Menu Item.
menuItem .horizontal .stylePreset	MQ<string>	menuItemHorizontal	Overrides the stylePreset of the icon, label and background of the Menu Item.
menuItem .vertical .spaceInline	MQ<string>	space020	Overrides the space between the leading icon and the label, as well as the label and the trailing icon.
menuItem .horizontal .spaceInline	MQ<string>	space020	Overrides the space between the leading icon and the label, as well as the label and the trailing icon.
menuItem .vertical .spaceInset	MQ<string>	spaceInsetSquish030	Overrides the spaceInset of the Menu Item.
menuItem .horizontal .spaceInset	MQ<string>	spaceInsetSquish030	Overrides the spaceInset of the Menu Item.

Menu Divider

Name	Type	Default	Description	Required

Attribute	Type	Default	Description
spaceInline	MQ<string>		Overrides the space between the divider and the next item. If not provided, the default value is taken either from the menu or menuGroup overrides.
stylePreset	MQ<string>	divider	Overrides the stylePreset of the Menu Divider.

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
Variations	Relevant variations (style, size, orientation etc.)
Interactive states	All interactive states that are applicable (hover, active, focus, focus, disabled, error etc).
Defined behaviours	Guidelines for layout, animation, interactions, etc.
Usage guidelines	Includes a list of dos and don’ts that highlight best practices and common mistakes to avoid.
Accessibility guidelines	Follows WCAG 2.0 standards (AA). Accessibility documentation defined including focus order, keyboard interactions and ARIA.
SEO guidelines	Conforms to best practice SEO techniques. SEO considerations defined.
Props	Details of component properties - their name, type, options, default, whether it’s required and their description have been defined.
Technical performance considerations	Details on how this component may impact performance.
Available in UI kit	Included within Figma Web Gallery file.
Design specifications	Detailed design specification including sizing, spacing and design tokens defined.
Themes	Displays correctly across light and dark themes.

Need Help?

Cant find what you are looking for?

Need Help?

Cant find what you are looking for?

Menu

Status

Introduced

Status

Introduced

Interactive Demo

Anatomy

Options

Orientation

Title

Menu Divider

Icons (leading & trailing)

Alignment

Size

Style

Orientation

Title

Menu Divider

Icons (leading & trailing)

Alignment

Size

Style

States

Base

Hover

Active

Disabled

Focus

Selected

Behaviours

Width and Height

Transitions

Selected

Label Overflow

Width and Height

Transitions

Selected

Label Overflow

Usage

Do

Do not

Do

Do not

Do

Do not

Accessibility Considerations

SEO Considerations

API

Compliance

Related Components

Tabs

Link

Divider

Need Help?

Need Help?