Items Menu

Components

Items menu has built in support for displaying scroll helpers, scroll faders, and to scroll active item into view when menu will not fit on the screen.

Basic examples

Play around with props, edit and copy code.

Advanced examples

Play around with the animations, clicks and copy code.

Link Items

Should be used when you need a navigation with only text or links. If there is a need for icon support, icon-item should be used.

<ItemsMenu
  branding="sport"
  hiddenScrollbar
  useScrollFaders
  useScrollHelpers
>
  <LinkItem
    Component="a"
    label="Start"
    onClick={function noRefCheck() {}}
    selected
  />
  <LinkItem
    Component="a"
    label="Kom i gång"
    onClick={function noRefCheck() {}}
  />
  <LinkItem
    Component="a"
    label="Spelguide"
    onClick={function noRefCheck() {}}
  />
  <LinkItem
    Component="a"
    label="Andra chansen"
    onClick={function noRefCheck() {}}
  />
  <LinkItem
    Component="a"
    label="Tredje chansen"
    onClick={function noRefCheck() {}}
  />
  <LinkItem
    Component="a"
    label="Fjärde chansen"
    onClick={function noRefCheck() {}}
  />
  <LinkItem
    Component="a"
    label="Vinnare"
    onClick={function noRefCheck() {}}
  />
</ItemsMenu>

Icon Items

Should be used when you need a navigation containing icons and text.

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

Ball Items

Should be used for functions in games.

<ItemsMenu
  branding="tur"
  centered
  useScrollFaders
  useScrollHelper
>
  <BallItem
    label="Mitt konto"
    onClick={function noRefCheck() {}}
    selected
    width={6.5}
  >
    <Icon icon="user" />
  </BallItem>
  <BallItem
    label="Saldo"
    onClick={function noRefCheck() {}}
    width={6.5}
  >
    <Icon icon="balance" />
  </BallItem>
  <BallItem
    label="Favoriter"
    onClick={function noRefCheck() {}}
    width={6.5}
  >
    <Icon icon="favorites" />
  </BallItem>
  <BallItem
    label="Gränser"
    onClick={function noRefCheck() {}}
    width={6.5}
  >
    <Icon icon="deposit-limits" />
  </BallItem>
  <BallItem
    label="Insättning"
    onClick={function noRefCheck() {}}
    width={6.5}
  >
    <Icon icon="deposit" />
  </BallItem>
</ItemsMenu>

Branding

Items menu has support for branding as described in the usage tab. Continue to read to find out how to create a new branding for the items menu.

How to create and implement new branding

Internal use (Trinidad)

// Less mixins
@import (reference) '/components/ui/items-menu/assets/stylesheets/items-menu';
.items-menu-wrapper-my-brand {
.items-menu-create-branding(...)
}

Params:
@default-icon-color    : Color on icon
@default-icon-color    : Color on icon on selected item
@default-text          : Color on label on item
@selected-text         : Color on label on selected item
@default-bg            : Background color on item
@selected-bg           : Background color on selected item
@default-border-color  : Color of border
@selected-border-color : Color of border when item is selected
@fade-from             : Color to fade from in fader
@fade-to               : Color to fade to in fader
@fixed-bg              : Background-color of fixed item_link
@nav-bg                : Background-color of the entire nav
@hover-bg              : Background-color on hover
@hover-icon-color      : Color of icon on hover
@border-hover-color    : Color of border on hover
@scroll-icon-color     : Color of icon in dimmer ( defaults to white)
@scroll-icon-bg        : Background for icon in dimmer (defaults to transparent)
@scroll-icon-radius    : Use 50% if ball i needed. (defaults to 0)
@border-bottom-color   : Color of border bottom (Defaults to transparent)

<ItemsMenu branding={'my-brand'}>...</ItemsMenu>

Properties

ItemsMenu

Prop name	Type	Default Value	Description
branding	union	'neutral'	Branding for items menu ( possible to create your own)
centered	bool	false	If centered
compact	bool	false	Compact menu
customClass	string	'default'	Custom class
customer	enum	'neutral'	Customer default is neutral
hiddenScrollbar	bool	false	Hide the scroll bar
inverted	bool	false	Inverted theme
scrollToSelected	bool	true	Scroll active item in to viewport
useScrollFadersOnHover	bool	false	Show scrollfaders only on hover. Use Scrollfaders needs to be true
useScrollHelpers	bool	false	Use scroll helpers for horizontal scroll
children	node		Content
className	string		Add class
scrollIcons	shape		Any svs icons used as scroll helpers
useScrollFaders	bool		Use scroll faders for horizontal scroll

LinkItem

Prop name	Type	Default Value	Description
Component	custom	'button'
onClick	func	() => { }	Function to run on click
selected	bool	false	If items is selected
badge	bool		If item should have a badge
badgeNr	string		Number in badge
children	node		Content
className	string		Custom css classes
fixedItem	enum		Branding if first item should be fixed
label	string		Label for item
width	number		Width of item if value is less then 16 em will be used, oterwhise px.

IconItem

Prop name	Type	Default Value
Component	custom	'button'
hasIconCircle	bool	false
hasUnderline	bool	true
isSelected	bool	false
onClick	func	() => { }
alignment	enum
badge	union
brandName	string
className	string
gutter	enum
iconName	string
label	string
minWidth	number

BallItem

Prop name	Type	Default Value	Description
Component	custom	'button'
onClick	func	() => { }	Function to handle click
selected	bool	false	Set item to selected
borderOnly	bool		Border only
children	node		Content
className	string		Add custom class
diameter	number		Diameter of ball
disabled	bool		Disable item
label	string		Label for item
type	string		Type of element
width	number		Width of item if value is less then 16, em will be used, otherwise px.th

Accessibility

This component has been validated to meet the WCAG 2.1 AA accessibility guidelines.