OLYSENSE Design System

Procedures

Findings

<ods-side-nav class="example">
  <ods-side-nav-menu slot="side-nav-content">
    <ods-side-nav-menu-item>
      <ods-icon slot="prefix" name="exam"></ods-icon>
      Procedures
    </ods-side-nav-menu-item>

    <ods-side-nav-menu-item>
      <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;
  }
</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;
  }
`;

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

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

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

export default Example;

Use the disabled attribute to disable the menu item.

Procedures

Findings

<ods-side-nav class="example">
  <ods-side-nav-menu slot="side-nav-content">
    <ods-side-nav-menu-item disabled>
      <ods-icon slot="prefix" name="exam"></ods-icon>
      Procedures
    </ods-side-nav-menu-item>

    <ods-side-nav-menu-item>
      <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;
  }
</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;
  }
`;

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

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

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

  )
}

export default Example;

Use the selected attribute to show the menu item as selected.

Procedures

Findings

<ods-side-nav class="example">
  <ods-side-nav-menu slot="side-nav-content">
    <ods-side-nav-menu-item selected>
      <ods-icon slot="prefix" name="exam"></ods-icon>
      Procedures
    </ods-side-nav-menu-item>

    <ods-side-nav-menu-item>
      <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;
  }
</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;
  }
`;

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

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

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;

Use the collapsable attribute to make the Side Nav Menu Group collapsable.

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;

Importing

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

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
(default)	The menu item's label.
prefix	Used to prepend an icon or similar element to the menu item.

Properties

Please note, both DOM properties and HTML attributes are shown in the table below. Unless otherwise specified, the property and attribute names are identical.

Property/Attribute	Type	Default
value	string	''
role	'menuitem' \| 'group'	'menuitem'
disabled	boolean	false
selected	boolean	false
closed	boolean	false
collapsible	boolean	false

Methods

Name	Description	Arguments
getTextLabel()	Returns a text label based on the contents of the menu item's default slot.	--

Parts

Name	Description
base	The component's base wrapper.
prefix	The prefix container.
label	The menu item label.

Dependencies

This component automatically imports the following dependencies.

ods-icon

See Side Nav for more information.

Content Guidelines

See Side Nav for more information.

Side Nav Menu Item

Examples

Basic

Disabled

Selected

With Group

Collapable Group

Importing

Slots

Properties

Methods

Parts

Dependencies

Usage

Content Guidelines