NUI-Widgets documentation has moved to Storybook hosted on Github Pages.

SideBar

import SideBar from '@concur/nui-widgets-lab/lib/SideBar/SideBar';

The SideBar component provides the ability to display navigation sections. It replaces the SideBar component from nui-shell.

Examples

The SideBar requires at least one Section but can have as many as necessary. Sections are comprised of 1 or more Links.

<SideBar skipLink={{href: '#content', label: 'Skip navigation'}}>
    <SideBar.Section title={'Section 1'}>
        <SideBar.Link href='#link' name='Item 1' />
        <SideBar.Link href='#link' name='Item 2' />
        <SideBar.Link href='#link' name='Item 3' />
    </SideBar.Section>
    <SideBar.Section title={'Section 2'}>
        <SideBar.Link href='#link' name='Item 4' />
        <SideBar.Link href='#link' name='Item 5' />
        <SideBar.Link href='#link' name='Item 6' />
    </SideBar.Section>
</SideBar>

The skipLink prop is used to define a method for keyboard users to skip the navigation section and instead jump directly to the content. It requires an href and a localized label. The skip link is invisible unless it receives direct focus; it will be the first tab stop within the section. Only one needs to be provided per SideBar component.

<SideBar skipLink={{href: '#content', label: 'Skip navigation'}}>
    <SideBar.Section title={'Section 1'}>
        <SideBar.Link href='#link' name='Item 1' />
        <SideBar.Link href='#link' name='Item 2' />
        <SideBar.Link href='#link' name='Item 3' />
    </SideBar.Section>
</SideBar>

Usage

Properties

Property Type Default Description
skipLink Object Required Contains an href and localized label to create a link to skip the navigation section.

SideBar.Section

Properties

Property Type Default Description
title String Required Localized title of the navigation section to be displayed.

Properties

Property Type Default Description
name String Required Localized text displayed as link.
href String Required Destination of link.