OLYSENSE Design System

Doctors

Doctor 1

Doctor 2

Doctor 3

Nurses

Nurse 1

Nurse 2

Nurse 3

<ods-menu style="max-width: 200px;">
  <ods-menu-label>Doctors</ods-menu-label>
  <ods-menu-item value="apple">Doctor 1</ods-menu-item>
  <ods-menu-item value="banana">Doctor 2</ods-menu-item>
  <ods-menu-item value="orange">Doctor 3</ods-menu-item>
  <ods-divider></ods-divider>
  <ods-menu-label>Nurses</ods-menu-label>
  <ods-menu-item value="broccoli">Nurse 1</ods-menu-item>
  <ods-menu-item value="carrot">Nurse 2</ods-menu-item>
  <ods-menu-item value="zucchini">Nurse 3</ods-menu-item>
</ods-menu>

import { OdsMenu } from '@ods/components/react.menu';
import { OdsMenuItem } from '@ods/components/react.menu-item';
import { OdsMenuLabel } from '@ods/components/react.menu-label';
import { OdsDivider } from '@ods/components/react.divider';

const Example = () => {
  return (
    <OdsMenu>
      <OdsMenuLabel>Doctors</OdsMenuLabel>
      <OdsMenuItem value="apple">Doctor 1</OdsMenuItem>
      <OdsMenuItem value="banana">Doctor 2</OdsMenuItem>
      <OdsMenuItem value="orange">Doctor 3</OdsMenuItem>
      <OdsDivider></OdsDivider>
      <OdsMenuLabel>Nurses</OdsMenuLabel>
      <OdsMenuItem value="broccoli">Nurse 1</OdsMenuItem>
      <OdsMenuItem value="carrot">Nurse 2</OdsMenuItem>
      <OdsMenuItem value="zucchini">Nurse 3</OdsMenuItem>
    </OdsMenu>
  )
}

export default Example;

Importing

import '@ods/components/web.menu-label';

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 label's content.

Parts

Name	Description
base	The component's base wrapper.

Menu Label

Examples

Importing

Slots

Parts