Newskit Logo
View Github

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

v3.3.0

Interactive Demo

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

Size
vertical
Align
Space Inline
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.

ItemNameDescriptionComponentOptional

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.

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

Focus order
OrderElementRole
Keyboard Interactions
CommandDescription
WAI-ARIA
ElementAttributeValueDescriptionUser 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).

Menu
NameTypeDefaultDescriptionRequired
Menu Item Group
NameTypeDefaultDescriptionRequired
Menu Item
NameTypeDefaultDescriptionRequired
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

Need Help?

Cant find what you are looking for?

Need Help?

Cant find what you are looking for?