OLYSENSE Design System

Use the side-nav-content slot to render a Side Nav Menu. See Side Nav Menu Item for more information on available configurations.

Dashboard

Procedures

Findings

<ods-side-nav class="example">
  <ods-side-nav-menu slot="side-nav-content">
    <ods-side-nav-menu-item value="dashboard">
      <ods-icon slot="prefix" name="dashboard"></ods-icon>
      Dashboard
    </ods-side-nav-menu-item>

    <ods-side-nav-menu-item value="procedures">
      <ods-icon slot="prefix" name="exam"></ods-icon>
      Procedures
    </ods-side-nav-menu-item>

    <ods-side-nav-menu-item value="findings">
      <ods-icon slot="prefix" name="kudo-classification"></ods-icon>
      Findings
    </ods-side-nav-menu-item>
  </ods-side-nav-menu>
<ods-side-nav>

<style>
  .example {
    border: 1px solid var(--ods-sys-color-outline-base);
    --app-sidebar-height: auto;
    max-width: 17.5rem;
  }
</style>

import { OdsSideNav } from '@ods/components/react.side-nav';
import { OdsSideNavMenu } from '@ods/components/react.side-nav-menu';
import { OdsSideNavMenuItem } from '@ods/components/react.side-nav-menu-item';
import { OdsIcon } from '@ods/components/react.icon';

const css = `
  .example {
    border: 1px solid var(--ods-sys-color-outline-base);
    --app-sidebar-height: auto;
    max-width: 17.5rem;
  }
`;

const Example = () => {
  return (
    <>
    <OdsSideNav className="example">
        <OdsSideNavMenu slot="side-nav-content">
          <OdsSideNavMenuItem value="dashboard">
            <OdsIcon slot="prefix" name="dashboard"></OdsIcon>
            Dashboard
          </OdsSideNavMenuItem>

          <OdsSideNavMenuItem value="procedures">
            <OdsIcon slot="prefix" name="exam"></OdsIcon>
            Procedures
          </OdsSideNavMenuItem>

          <OdsSideNavMenuItem value="findings">
            <OdsIcon slot="prefix" name="kudo-classification"></OdsIcon>
            Findings
          </OdsSideNavMenuItem>
        </OdsSideNavMenu>
      </OdsSideNav>

      <style>{css}</style>
    </>
  )
}

export default Example;

Use the Side Nav Menu Group component inside a Side Nav Menu Item component to create a group of menu items. See Side Nav Menu Group for more information on available configurations.

Dashboard

Procedures

By Exam Type

By Procedure Type

BBPS

Procedure Duration

Total Endoscope Time

Withdrawal Time

Retroflexion Detection

By Doctor

Findings

<ods-side-nav class="example">
  <ods-side-nav-menu slot="side-nav-content">
    <ods-side-nav-menu-item value="Dashboard">
      <ods-icon slot="prefix" name="dashboard"></ods-icon>
      Dashboard
    </ods-side-nav-menu-item>

    <ods-side-nav-menu-item role="group" collapsible>
      <ods-icon slot="prefix" name="exam"></ods-icon>
      Procedures
      <ods-side-nav-menu-group slot="subnav">
        <ods-side-nav-menu-group-item value="By Exam Type">By Exam Type</ods-side-nav-menu-group-item>
        <ods-side-nav-menu-group-item value="By Procedure Type">By Procedure Type</ods-side-nav-menu-group-item>
        <ods-side-nav-menu-group-item value="BBPS">BBPS</ods-side-nav-menu-group-item>
        <ods-side-nav-menu-group-item value="Procedure Duration">Procedure Duration</ods-side-nav-menu-group-item>
        <ods-side-nav-menu-group-item value="Total Endoscope Time">Total Endoscope Time</ods-side-nav-menu-group-item>
        <ods-side-nav-menu-group-item value="Withdrawal Time">Withdrawal Time</ods-side-nav-menu-group-item>
        <ods-side-nav-menu-group-item value="Withdrawal Time">Withdrawal Time</ods-side-nav-menu-group-item>
        <ods-side-nav-menu-group-item value="Retroflexion Detection">Retroflexion Detection</ods-side-nav-menu-group-item>
        <ods-side-nav-menu-group-item value="By Doctor">By Doctor</ods-side-nav-menu-group-item>
      </ods-side-nav-menu-group>
    </ods-side-nav-menu-item>

    <ods-side-nav-menu-item value="Findings">
      <ods-icon slot="prefix" name="kudo-classification"></ods-icon>
      Findings
    </ods-side-nav-menu-item>
  </ods-side-nav-menu>
<ods-side-nav>

<style>
  .example {
    border: 1px solid var(--ods-sys-color-outline-base);
    --app-sidebar-height: auto;
    max-width: 17.5rem;
  }
</style>

import { OdsSideNav } from '@ods/components/react.side-nav';
import { OdsSideNavMenu } from '@ods/components/react.side-nav-menu';
import { OdsSideNavMenuItem } from '@ods/components/react.side-nav-menu-item';
import { OdsSideNavMenuGroupItem } from '@ods/components/react.side-nav-menu-group-item';
import { OdsSideNavMenuGroup } from '@ods/components/react.side-nav-menu-group';
import { OdsIcon } from '@ods/components/react.icon';

const css = `
  .example {
    border: 1px solid var(--ods-sys-color-outline-base);
    --app-sidebar-height: auto;
    max-width: 17.5rem;
  }
`;

const Example = () => {
  return (
    <>
      <OdsSideNav className="example">
        <OdsSideNavMenu slot="side-nav-content">
          <OdsSideNavMenuItem value="Dashboard">
            <OdsIcon slot="prefix" name="dashboard"></OdsIcon>
            Dashboard
          </OdsSideNavMenuItem>

          <OdsSideNavMenuItem role="group" collapsible>
            <OdsIcon slot="prefix" name="exam"></OdsIcon>
            Procedures
            <OdsSideNavMenuGroup slot="subnav">
              <OdsSideNavMenuGroupItem value="By Exam Type">By Exam Type</OdsSideNavMenuGroupItem>
              <OdsSideNavMenuGroupItem value="By Procedure Type">By Procedure Type</OdsSideNavMenuGroupItem>
              <OdsSideNavMenuGroupItem value="BBPS">BBPS</OdsSideNavMenuGroupItem>
              <OdsSideNavMenuGroupItem value="Procedure Duration">Procedure Duration</OdsSideNavMenuGroupItem>
              <OdsSideNavMenuGroupItem value="Total Endoscope Time">Total Endoscope Time</OdsSideNavMenuGroupItem>
              <OdsSideNavMenuGroupItem value="Withdrawal Time">Withdrawal Time</OdsSideNavMenuGroupItem>
              <OdsSideNavMenuGroupItem value="Withdrawal Time">Withdrawal Time</OdsSideNavMenuGroupItem>
              <OdsSideNavMenuGroupItem value="Retroflexion Detection">Retroflexion Detection</OdsSideNavMenuGroupItem>
              <OdsSideNavMenuGroupItem value="By Doctor">By Doctor</OdsSideNavMenuGroupItem>
            </OdsSideNavMenuGroup>
          </OdsSideNavMenuItem>

          <OdsSideNavMenuItem value="Findings">
            <OdsIcon slot="prefix" name="kudo-classification"></OdsIcon>
            Findings
            </OdsSideNavMenuItem>
        </OdsSideNavMenu>
      </OdsSideNav>

      <style>{css}</style>
    </>

  )
}

export default Example;

Use a Side Nav Menu Section Label inside a Side Nav Menu to identify a group of related menu items.

Settings

Application Settings

Structured Terminology

Facility Settings

User Permissions

Groups

Roles

Permissions

Logs

Activity Logs

<ods-side-nav class="example">
  <ods-side-nav-menu slot="side-nav-content">
    <ods-side-nav-menu-section-label>Settings</ods-side-nav-menu-section-label>

    <ods-side-nav-menu-item value="applications-ettings">
      <ods-icon slot="prefix" name="settings"></ods-icon>
      Application Settings
    </ods-side-nav-menu-item>

    <ods-side-nav-menu-item value="structured-terminology">
      <ods-icon slot="prefix" name="report"></ods-icon>
      Structured Terminology
    </ods-side-nav-menu-item>

    <ods-side-nav-menu-item value="facility-settings">
      <ods-icon slot="prefix" name="cart-tower"></ods-icon>
      Facility Settings
    </ods-side-nav-menu-item>

    <ods-side-nav-menu-item role="group" collapsible>
      <ods-icon slot="prefix" name="service"></ods-icon>
      User Permissions
      <ods-side-nav-menu-group slot="subnav">
        <ods-side-nav-menu-group-item value="groups">Groups</ods-side-nav-menu-group-item>
        <ods-side-nav-menu-group-item value="roles">Roles</ods-side-nav-menu-group-item>
        <ods-side-nav-menu-group-item value="permissions">Permissions</ods-side-nav-menu-group-item>
      </ods-side-nav-menu-group>
    </ods-side-nav-menu-item>

    <ods-side-nav-menu-section-label>Logs</ods-side-nav-menu-section-label>

    <ods-side-nav-menu-item value="activity-logs">
      <ods-icon slot="prefix" name="history"></ods-icon>
      Activity Logs
    </ods-side-nav-menu-item>
  </ods-side-nav-menu>
<ods-side-nav>

<style>
  .example {
    border: 1px solid var(--ods-sys-color-outline-base);
    --app-sidebar-height: auto;
    max-width: 17.5rem;
  }
</style>

import { OdsSideNav } from '@ods/components/react.side-nav';
import { OdsSideNavMenu } from '@ods/components/react.side-nav-menu';
import { OdsSideNavMenuItem } from '@ods/components/react.side-nav-menu-item';
import { OdsSideNavMenuGroup } from '@ods/components/react.side-nav-menu-group';
import { OdsSideNavMenuGroupItem } from '@ods/components/react.side-nav-menu-group-item';
import { OdsSideNavMenuSectionLabel } from '@ods/components/react.side-nav-menu-section-label';
import { OdsIcon } from '@ods/components/react.icon';

const css = `
  .example {
    border: 1px solid var(--ods-sys-color-outline-base);
    --app-sidebar-height: auto;
    max-width: 17.5rem;
  }
`;

const Example = () => {
  return (
    <>
      <OdsSideNav className="example">
        <OdsSideNavMenu slot="side-nav-content">

          <OdsSideNavMenuSectionLabel>Settings</OdsSideNavMenuSectionLabel>

          <OdsSideNavMenuItem value="applications-ettings">
            <OdsIcon slot="prefix" name="settings"></OdsIcon>
            Application Settings
          </OdsSideNavMenuItem>

          <OdsSideNavMenuItem value="structured-terminology">
            <OdsIcon slot="prefix" name="report"></OdsIcon>
            Structured Terminology
          </OdsSideNavMenuItem>

          <OdsSideNavMenuItem>
            <OdsIcon slot="prefix" name="cart-tower"></OdsIcon>
            Facility Settings
          </OdsSideNavMenuItem>

          <OdsSideNavMenuItem role="group" collapsible>
            <OdsIcon slot="prefix" name="service"></OdsIcon>
            User Permissions
            <OdsSideNavMenuGroup slot="subnav">
              <OdsSideNavMenuGroupItem value="groups">Groups</OdsSideNavMenuGroupItem>
              <OdsSideNavMenuGroupItem value="roles">Roles</OdsSideNavMenuGroupItem>
              <OdsSideNavMenuGroupItem value="permissions">Permissions</OdsSideNavMenuGroupItem>
            </OdsSideNavMenuGroup>
          </OdsSideNavMenuItem>

          <OdsSideNavMenuSectionLabel>Logs</OdsSideNavMenuSectionLabel>

          <OdsSideNavMenuItem value="activity-logs">
            <OdsIcon slot="prefix" name="history"></OdsIcon>
            Activity Logs
            </OdsSideNavMenuItem>
        </OdsSideNavMenu>
      </OdsSideNav>

      <style>{css}</style>
    </>

  )
}

export default Example;

Use the side-nav-header and side-nav-footer slots to render content above or blow the menu options. The footer content will stick to the bottom of the navigation.

Header Content

Dashboard

Procedures

Findings

Footer Content

<ods-side-nav class="with-header-example">
  <div slot="side-nav-header" ods-text="content" ods-layout="p:md" class="header-content">
    Header Content
  </div>

  <ods-side-nav-menu slot="side-nav-content">
    <ods-side-nav-menu-item value="dashboard">
      <ods-icon slot="prefix" name="dashboard"></ods-icon>
      Dashboard
    </ods-side-nav-menu-item>

    <ods-side-nav-menu-item value="procedures">
      <ods-icon slot="prefix" name="exam"></ods-icon>
      Procedures
    </ods-side-nav-menu-item>

    <ods-side-nav-menu-item value="findings">
      <ods-icon slot="prefix" name="kudo-classification"></ods-icon>
      Findings
    </ods-side-nav-menu-item>
  </ods-side-nav-menu>

  <div slot="side-nav-footer" ods-text="content" ods-layout="p:md" class="footer-content">
    Footer Content
  </div>
<ods-side-nav>

<style>
  .with-header-example {
    border: 1px solid var(--ods-sys-color-outline-base);
    --app-sidebar-height: 400px;
  }

  .header-content {
    background-color: var(--ods-sys-color-suface-container);
    height: var(--ods-sys-size-64);
    display: flex;
    align-items: center;
    color: var(--ods-sys-color-on-surface);
  }

  .footer-content {
    background-color: var(--ods-sys-color-suface-container);
    height: var(--ods-sys-size-64);
    display: flex;
    align-items: center;
    color: var(--ods-sys-color-on-surface);
  }
</style>

import { OdsSideNav } from '@ods/components/react.side-nav';
import { OdsSideNavMenu } from '@ods/components/react.side-nav-menu';
import { OdsSideNavMenuItem } from '@ods/components/react.side-nav-menu-item';
import { OdsIcon } from '@ods/components/react.icon';

const css = `
  .with-header-example {
    border: 1px solid var(--ods-sys-color-outline-base);
    --app-sidebar-height: 400px;
  }

  .header-content {
    background-color: var(--ods-sys-color-suface-base);
    height: var(--ods-sys-size-64);
    display: flex;
    align-items: center;
    color: var(--ods-sys-color-on-surface);
  }

  .footer-content {
    background-color: var(--ods-sys-color-suface-base);
    height: var(--ods-sys-size-64);
    display: flex;
    align-items: center;
    color: var(--ods-sys-color-on-surface);
  }
`;

const Example = () => {
  return (
    <>
      <OdsSideNav className="with-header-example">
        <div slot="side-nav-header" ods-text="content" ods-layout="p:md" className="header-content">
          Header Content
        </div>
        <OdsSideNavMenu slot="side-nav-content">
          <OdsSideNavMenuItem>
            <OdsIcon slot="prefix" name="dashboard"></OdsIcon>
            Dashboard
          </OdsSideNavMenuItem>

          <OdsSideNavMenuItem>
            <OdsIcon slot="prefix" name="exam"></OdsIcon>
            Procedures
          </OdsSideNavMenuItem>

          <OdsSideNavMenuItem>
            <OdsIcon slot="prefix" name="kudo-classification"></OdsIcon>
            Findings
          </OdsSideNavMenuItem>
        </OdsSideNavMenu>

        <div slot="side-nav-footer" ods-text="content" ods-layout="p:md" className="footer-content">
          Footer Content
        </div>
      </OdsSideNav>

      <style>{css}</style>
    </>

  )
}

export default Example;

You can listen for the sense-select event to determine which Side Nav Menu Item was clicked. The Side Nav Menu Item element will be exposed in event.detail.item.

Dashboard

Procedures

By Exam Type

By Procedure Type

BBPS

Procedure Duration

Total Endoscope Time

Withdrawal Time

Retroflexion Detection

By Doctor

Findings

<ods-side-nav id="select-event-example" class="example">
  <ods-side-nav-menu slot="side-nav-content">
    <ods-side-nav-menu-item value="Dashboard">
      <ods-icon slot="prefix" name="dashboard"></ods-icon>
      Dashboard
    </ods-side-nav-menu-item>

    <ods-side-nav-menu-item role="group" collapsible>
      <ods-icon slot="prefix" name="exam"></ods-icon>
      Procedures
      <ods-side-nav-menu-group slot="subnav">
        <ods-side-nav-menu-item value="By Exam Type">By Exam Type</ods-side-nav-menu-item>
        <ods-side-nav-menu-item value="By Procedure Type">By Procedure Type</ods-side-nav-menu-item>
        <ods-side-nav-menu-item value="BBPS">BBPS</ods-side-nav-menu-item>
        <ods-side-nav-menu-item value="Procedure Duration">Procedure Duration</ods-side-nav-menu-item>
        <ods-side-nav-menu-item value="Total Endoscope Time">Total Endoscope Time</ods-side-nav-menu-item>
        <ods-side-nav-menu-item value="Withdrawal Time">Withdrawal Time</ods-side-nav-menu-item>
        <ods-side-nav-menu-item value="Withdrawal Time">Withdrawal Time</ods-side-nav-menu-item>
        <ods-side-nav-menu-item value="Retroflexion Detection">Retroflexion Detection</ods-side-nav-menu-item>
        <ods-side-nav-menu-item value="By Doctor">By Doctor</ods-side-nav-menu-item>
      </ods-side-nav-menu-group>
    </ods-side-nav-menu-item>

    <ods-side-nav-menu-item value="Findings">
      <ods-icon slot="prefix" name="kudo-classification"></ods-icon>
      Findings
    </ods-side-nav-menu-item>
  </ods-side-nav-menu>
<ods-side-nav>

<style>
  .example {
    border: 1px solid var(--ods-sys-color-outline-base);
    --app-sidebar-height: auto;
    max-width: 17.5rem;
  }
</style>

<script>
  const menu = document.getElementById('select-event-example');

  const onSelectHandler = (event) => {
    const value = event.detail.value;

    console.log(`event`, event);
    console.log(`event.detail`, event.detail);

    alert(`Selected item is ${value}`);
  };

  menu.addEventListener('ods-select', event => onSelectHandler(event));
</script>

import { OdsSideNav } from '@ods/components/react.side-nav';
import { OdsSideNavMenu } from '@ods/components/react.side-nav-menu';
import { OdsSideNavMenuItem } from '@ods/components/react.side-nav-menu-item';
import { OdsSideNavMenuGroup } from '@ods/components/react.side-nav-menu-group';
import { OdsIcon } from '@ods/components/react.icon';
import { OdsSelectEvent } from '@ods/components/react';

const css = `
  .example {
    border: 1px solid var(--ods-sys-color-outline-base);
    --app-sidebar-height: auto;
    max-width: 17.5rem;
  }
`;

const Example = () => {
  const onSelectHandler = (event: OdsSelectEvent) => {
    const selectedValue = event.detail.value;

    alert(`Selected item is ${selectedValue}`);
  };

  return (
    <>
      <OdsSideNav className="example">
        <OdsSideNavMenu slot="side-nav-content" onOdsSelect={onSelectHandler}>
          <OdsSideNavMenuItem value="Dashboard">
            <OdsIcon slot="prefix" name="dashboard"></OdsIcon>
            Dashboard
          </OdsSideNavMenuItem>

          <OdsSideNavMenuItem role="group" collapsible>
            <OdsIcon slot="prefix" name="exam"></OdsIcon>
            Procedures
            <OdsSideNavMenuGroup slot="subnav">
              <OdsSideNavMenuItem value="By Exam Type">By Exam Type</OdsSideNavMenuItem>
              <OdsSideNavMenuItem value="By Procedure Type">By Procedure Type</OdsSideNavMenuItem>
              <OdsSideNavMenuItem value="BBPS">BBPS</OdsSideNavMenuItem>
              <OdsSideNavMenuItem value="Procedure Duration">Procedure Duration</OdsSideNavMenuItem>
              <OdsSideNavMenuItem value="Total Endoscope Time">Total Endoscope Time</OdsSideNavMenuItem>
              <OdsSideNavMenuItem value="Withdrawal Time">Withdrawal Time</OdsSideNavMenuItem>
              <OdsSideNavMenuItem value="Withdrawal Time">Withdrawal Time</OdsSideNavMenuItem>
              <OdsSideNavMenuItem value="Retroflexion Detection">Retroflexion Detection</OdsSideNavMenuItem>
              <OdsSideNavMenuItem value="By Doctor">By Doctor</OdsSideNavMenuItem>
            </OdsSideNavMenuGroup>
          </OdsSideNavMenuItem>

          <OdsSideNavMenuItem value="Findings">
            <OdsIcon slot="prefix" name="kudo-classification"></OdsIcon>
            Findings
            </OdsSideNavMenuItem>
        </OdsSideNavMenu>
      </OdsSideNav>

      <style>{css}</style>
    </>

  )
}

export default Example;

Importing

import '@ods/components/web.side-nav';

Note: You only need to import a web component once in your code, as it registers itself globally when defined, allowing you to use it anywhere within your application without needing to re-import it each time you want to use the component.

Slots

Name	Description
side-nav-header	Content region at the top of the side-nav.
side-nav-content	Content region of the side-nav.
side-nav-footer	Content region at the bottom of the side-nav.

Parts

Name	Description
base	The component's base wrapper.
side-nav-header	The header region's wrapper at the top of the side-nav.
side-nav-content	The content region's wrapper at the center of the side-nav.
side-nav-footer	The footer region's wrapper at the bottom of the side-nav.

Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

Use Section Labels to organize similar pages and groups
Match the Side Nav Menu Item labels with the page header breadcrumbs
Adhere to the fixed-width value of 280px

Use Section Labels within a Side Nav Menu Group
Mix terminology between Side Nav and Breadrcrumbs
Adjust the width of the Side Nav based on content or preference

Content Guidelines

The goal of a Side Nav is to offer the user a quick way to navigate around different pages within an application. They should not act as a “junk drawer” the way that a traditional Hamburger Menu is often utilized. Side Nav Menu Items within a Side Nav Menu need to be intentional and conservative, so as not to overwhelm the user with a long list of options. Use Side Nav Menu Section Label and Side Nav Group Menu Group to help organize sub content.

Keep in mind that the Side Nav Menu Items should match what is used in the Page Header breadcrumbs, and vice versa. See Breadcrumbs for more information.

Generic, succinct single-word labels are best here. First gather related navigation items under a section then determine the best term to use as the section label.

Settings
Logs

Settings and User Permissions
Activity and System Logs

Short, 1-2 word labels that sum up the page content, and avoid action-based terms.

Settings
Application Settings

Application Settings and Options
Settings and Options

A collection of pages can be grouped using a Side Nav Group Menu Group inside a Side Nav Menu Item . Try not to repeat terms used in the name of the group. Use short 1-2 word labels that sum up the page content, and avoid action-based terms.

User Permissions

Permission for Users, Groups and Facilities

Side Nav

Examples

Basic

Menu Group

With Section Labels

With Header and Footer

Handling An Event

Importing

Slots

Parts

Usage

Do

Dont

Content Guidelines

Side Nav Section Label

Do

Dont

Side Nav Menu Item

Do

Dont

Side Nav Menu Group

Do

Dont