Sysnav

Overview

Sysnav allows the user to navigate within a page by using anchors. Anchors help your visitors quickly find answers to their questions, without needing to scroll endlessly. A single click on an anchor will take them exactly where they want to go: down to the content.

Use the sysnav if the content of your page is very longue and the important informations are not on top of the page.

1. Default sysnav
   Default sysnav takes the full width of the gridding.
2. Sysnav with title
   The title is used to describe the topic of the sysnav.

States

1. Active state
   State visible when the section in your viewport match with an item in the sysnav.
2. Default state
   State visible before click.
3. Hover/Focused state
   State visible when the cursor hovers the anchor and triggered by keyboard navigation or click.
4. Disabled state
   State visible if the anchor is not available.

Anatomy

1. Title (optional)
   The title is used to describe the topic of the sysnav.
2. Item container
   Whether its state, each item is enclosed within a container.
3. Anchor label
   Anchor labels should clearly and succinctly describe the content of the section they represent.
   To optimize the mobile experience, your labels can't exceed 25 characters, including spaces.
4. Navigation arrows (desktop only)
   If the synav is bigger than the gridding size, the exceeding elements will be hidden and an arrow will be displayed on desktop only. This arrow allows to comfortably navigate through all the items. It is avaiblable both on the right and the left side depending where the user is within the list.

Navigation between anchors

If the synav is bigger than the gridding size, the exceeding anchors will be hidden. Users can navigate through all the anchors differently depending of the breakpoint:

Desktop
Anchors are hidden by a clean cut and the user can use the navigation arrows to see the other anchors.

Mobile
Anchors are hidden by a clean cut and the user can navigate through the anchors by swiping the sysnav.

Overlapping

The sysnav can overlap on another element. It's then placed astride and positioned at half its height.

Make sure there is enough space in the area for the sysnav to overlap.

Negative sysnav

In the negative version, the overlap option is only available for black interface.

Don't
It's forbidden to use the negative sysnav on overlap on others colors like purple.

Sysnav with title

The overlap option is only available for the default sysnav. .

Don't
On desktop, it's forbidden to use the sysnav with title on overlap

Don't
On mobile, it's forbidden to use the sysnav with title on overlap too.

Responsiveness

Sysnav with title on mobile
In the case of the sysnav with title, this one is displayed before the sysnav on mobile.

Overlapping on mobile
When you choose to apply the overlap option, it will be also overlap the sysnav on mobile.

Sizes and colors

Configuration metadata

Selector: ds-sysnav

Class: DSSysNavComponent

Use case example

Inputs

Outputs

Models

        export interface ISysNavContent {
            id: string;
            label: string;
            isSelected?: boolean;
            isDisabled?: boolean;
            reference: string;
        }

        export interface ISysNavConfig {
            hasNegativeStyle?: boolean;
            hasTitle?: boolean;
            isOverlapping?: boolean;
        }

        export interface ISysNavContents {
          contents: Array<ISysNavContent>;
        }