Items Menu

The items menu is used to display a list of options or items for selection and navigation. It can be used in the top navigation or within your layout to streamline navigation and reduce complexity.

Interactive demo

This demo lets you preview the Items menu and configuration options.

<ItemsMenu
  centered
  hiddenScrollbar
  useScrollFaders
  useScrollHelpers
>
  <IconItem
    Component="a"
    alignment="horizontal"
    gutter={1}
    iconName="user"
    isSelected
    label="Mitt konto"
    onClick={function noRefCheck() {}}
  />
  <IconItem
    Component="a"
    alignment="horizontal"
    gutter={1}
    iconName="withdrawal"
    label="Överföringar"
    onClick={function noRefCheck() {}}
  />
  <IconItem
    Component="a"
    alignment="horizontal"
    gutter={1}
    iconName="viewsummary"
    label="Översikt"
    onClick={function noRefCheck() {}}
  />
  <IconItem
    Component="a"
    alignment="horizontal"
    gutter={1}
    iconName="document"
    label="Dokument"
    onClick={function noRefCheck() {}}
  />
  <IconItem
    Component="a"
    alignment="horizontal"
    gutter={1}
    iconName="calendar"
    label="Kalender"
    onClick={function noRefCheck() {}}
  />
</ItemsMenu>

Usage

Structured navigation

Organize menu for easy navigation. Group related items. Prioritize commonly accessed ones. Enhance usability.

Hierarchy

Create a user-centric menu hierarchy. Order items for desired navigation, prioritizing important options at the top. Guide users to key features efficiently.

Alignment

Alignment is key for design consistency and user experience. It ensures elements in your menu are properly positioned, improving navigation, aesthetics, and maintaining a consistent visual flow in your interface. In some cases you can break the rule but only if it adds a better flow and user experience.

Align left

Use if your design/layout is left aligned.

Align center

Use if your design/layout is center aligned

Content

Do

Arrange menu links logically with concise labels.

Don't

Use vague or confusing or overly long labels for your menu links.

Do

Use different styles for your items menu to enhance clear navigation and make it easier for users to find what they need.

Don't

Use the same menu style for all items, as it can lead to confusion and hinder user navigation.

Anatomy

Icon items horizontal

A - Container
B - Label
C - Icon
D - Stroke (selected state)

Icon items vertical

A - Container
B - Icon
C - Font weight (selected state)
D - Label

Sizes

The items menu is available in the sizes 44, 66, 77 and 85 px.

A – 200 (44 px)
B – 300 (77 px)
C – 500 (85 px)

Formatting

Sizes

200

This is efficient for menus that contain a large number of links or items, allowing for efficient navigation and easy access to a wide range of content.

Icon support for added value.

This is efficient for menus with a smaller number of links or items that you want to highlight and showcase prominently. Only use if the icon adds additional value.

300 (compact)

Ideal for mobile use with fewer links and icon support.

500

Ideal for desktop use with fewer links and icon support.

Fixed menu

Fixed menus ensure important links/items are always visible, especially in limited-width mobile views. They enhance user experience by providing easy access to essential content.

Sport & Casino

Tur

Branding

Use default brand color for branding. If accessibility guidelines is not met, use variant ending in a number (e.g., brand-000) for legibility.

Branding fixed menu

Apply branding rules to the fixed menu, following the examples shown below for consistency and cohesive visual identity.

Sport & Casino

Implementation of branding for Oddset at Sport & Casino.

Tur

Implementation of branding for Vikinglotto at Tur.

Example of fixed item in menu

In this example, we used the ‘fixed’ menu to highlight "Spel" (Games) to ensure easy access.

Sport & Casino products

Example for Sport och Casino with the products ‘Racing’ and ‘Stryktipset’.

Tur products

Example for Tur with the products ‘Lotto’ and ‘Vikinglotto’.

Examples of proper usage

Varied menu styles are implemented for improved navigation. Here are two examples: one from Sport & Casino and Stryktipset, and the other from Tur with Lotto.

Stryktipset

In this example, we use the same styling for the menus, which works well because the menus are separated from each other and the sizes differ.

Lotto

Varied menu styles for improved navigation enhance the user experience in Lotto.