OLYSENSE Design System

User Permissions

Groups

Roles

Permissions

<ods-side-nav class="example">
  <ods-side-nav-menu slot="side-nav-content">
    <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>
<ods-side-nav>

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

const Example = () => {
  return (
    <>
      <OdsSideNav className="example">
        <OdsSideNavMenu slot="side-nav-content">
          <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>
        </OdsSideNavMenu>
      </OdsSideNav>

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

export default Example;

Use the disabled attribute to disable the side nav group menu item.

User Permissions

Groups

Roles

Permissions

<ods-side-nav class="example">
  <ods-side-nav-menu slot="side-nav-content">
    <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" disabled>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>
<ods-side-nav>

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

const Example = () => {
  return (
    <>
      <OdsSideNav className="example">
        <OdsSideNavMenu slot="side-nav-content">
          <OdsSideNavMenuItem role="group" collapsible>
            <OdsIcon slot="prefix" name="service"></OdsIcon>
            User Permissions
            <OdsSideNavMenuGroup slot="subnav">
              <OdsSideNavMenuGroupItem value="groups" disabled>Groups</OdsSideNavMenuGroupItem>
              <OdsSideNavMenuGroupItem value="roles">Roles</OdsSideNavMenuGroupItem>
              <OdsSideNavMenuGroupItem value="permissions">Permissions</OdsSideNavMenuGroupItem>
            </OdsSideNavMenuGroup>
          </OdsSideNavMenuItem>
        </OdsSideNavMenu>
      </OdsSideNav>

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

export default Example;

Use the selected attribute to show the side nav group menu item as selected.

User Permissions

Groups

Roles

Permissions

<ods-side-nav class="example">
  <ods-side-nav-menu slot="side-nav-content">
    <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" selected>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>
<ods-side-nav>

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

const Example = () => {
  return (
    <>
      <OdsSideNav className="example">
        <OdsSideNavMenu slot="side-nav-content">
          <OdsSideNavMenuItem role="group" collapsible>
            <OdsIcon slot="prefix" name="service"></OdsIcon>
            User Permissions
            <OdsSideNavMenuGroup slot="subnav">
              <OdsSideNavMenuGroupItem value="groups">Groups</OdsSideNavMenuGroupItem>
              <OdsSideNavMenuGroupItem value="roles" selected>Roles</OdsSideNavMenuGroupItem>
              <OdsSideNavMenuGroupItem value="permissions">Permissions</OdsSideNavMenuGroupItem>
            </OdsSideNavMenuGroup>
          </OdsSideNavMenuItem>
        </OdsSideNavMenu>
      </OdsSideNav>

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

export default Example;

Importing

import '@ods/components/web.side-nav-menu-group-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 Group Item

Examples

Basic

Disabled

Selected

Importing

Slots

Properties

Methods

Parts

Dependencies

Usage

Content Guidelines