OLYSENSE Design System

Side Nav Menu Groups are open by default. See below for information on setting a group to be closed.

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

User the collapsable attribute on the Side Nav Menu Item to give the group the ability to open collapsed.

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 the closed and collapsable attributes on the Side Nav Menu Item to set the group to be closed and collapsible.

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 closed>
      <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 { OdsSideNavMenuGroup } from '@ods/components/react.side-nav-menu-group';
import { OdsSideNavMenuGroupItem } from '@ods/components/react.side-nav-menu-group-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 role="group" collapsible closed>
            <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;

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.

See Side Nav for more information.

Content Guidelines

See Side Nav for more information.

Side Nav Menu Group

Examples

Basic

Collapable

Closed

Importing

Slots

Parts

Usage

Content Guidelines