SidebarSecondary

Usage

import {
  SidebarSecondary,
  SidebarSecondaryHeader,
  SidebarSecondaryContent,
  SidebarSecondaryFooter,
  SidebarSecondarySection,
  SidebarSecondarySectionLabel,
  SidebarSecondaryMenu,
  SidebarSecondaryMenuItem,
  SidebarSecondaryMenuItemExtras,
  SidebarSecondaryCollapseTrigger,
} from '@acronis-platform/ui-react';

SidebarSecondary is the second-level navigation panel that sits beside SidebarPrimary. It supports expandable SidebarSecondarySections for grouping items. The panel itself owns a controlled/uncontrolled expanded width state. SidebarSecondary and the menu-item parts are polymorphic via the render prop. Themed by the --ui-sidebar-secondary-* tokens.

Examples

A panel with a section and a sub-menu:

<SidebarSecondary>
  <SidebarSecondaryHeader label="Protection" />
  <SidebarSecondaryContent>
    <SidebarSecondarySection>
      <SidebarSecondarySectionLabel>Overview</SidebarSecondarySectionLabel>
      <SidebarSecondaryMenu>
        <SidebarSecondaryMenuItem href="#" icon={<LayoutGridIcon />} selected>
          Dashboard
        </SidebarSecondaryMenuItem>
        <SidebarSecondaryMenuItem href="#" icon={<ServerIcon />}>
          Workloads
        </SidebarSecondaryMenuItem>
      </SidebarSecondaryMenu>
    </SidebarSecondarySection>

    <SidebarSecondarySection>
      <SidebarSecondarySectionLabel>Resources</SidebarSecondarySectionLabel>
      <SidebarSecondaryMenu>
        <SidebarSecondaryMenuItem href="#" icon={<BoxIcon />} selected>
          Backups
        </SidebarSecondaryMenuItem>
        <SidebarSecondaryMenuItem href="#">
          Archived
        </SidebarSecondaryMenuItem>
      </SidebarSecondaryMenu>
    </SidebarSecondarySection>
  </SidebarSecondaryContent>

  <SidebarSecondaryFooter>
    <SidebarSecondaryMenu>
      <SidebarSecondaryCollapseTrigger icon={<ChevronLeftIcon />}>
        Collapse
      </SidebarSecondaryCollapseTrigger>
    </SidebarSecondaryMenu>
  </SidebarSecondaryFooter>
</SidebarSecondary>

An expandable section (the second collapse level):

<SidebarSecondarySection expandable defaultOpen>
  <SidebarSecondarySectionLabel>Settings</SidebarSecondarySectionLabel>
  <SidebarSecondaryMenu>
    <SidebarSecondaryMenuItem href="#">General</SidebarSecondaryMenuItem>
  </SidebarSecondaryMenu>
</SidebarSecondarySection>

API Reference

SidebarSecondary

Prop

Type

SidebarSecondaryHeader

Prop

Type

SidebarSecondaryMenuItem

Prop

Type

SidebarSecondaryMenuItemExtras

Prop

Type

SidebarSecondaryCollapseTrigger

Prop

Type

SidebarSecondarySection adds expandable plus open / defaultOpen / onOpenChange for the expandable-section collapse level. The remaining structural parts (SidebarSecondaryContent, SidebarSecondarySectionLabel, SidebarSecondaryMenu, SidebarSecondaryFooter) accept the standard attributes of the element they render.

Edit on GitHub

SidebarSecondary

On this page