Sidenav

Primary navigation menu for left side of the page that includes support for branding, links, etc.

#
Documentation

#
Usage

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
  Sidenav,
  SidenavAccountItem,
  SidenavBody,
  SidenavFooter,
  SidenavItem,
  SidenavToggle,
} from "@optiaxiom/react";
import {
  IconBinaryTree,
  IconChartLine,
  IconExternalLink,
  IconFlag2,
  IconLayoutSidebar,
  IconSettings,
  IconVocabulary,
} from "@tabler/icons-react";
 
import { Canvas } from "../Canvas";
 
export function App() {
  return (
    <Canvas>
      <Sidenav defaultExpanded>
        <SidenavBody>
          <SidenavItem aria-label="Projects" icon={<IconBinaryTree />}>
            Projects
          </SidenavItem>
          <SidenavItem active aria-label="Flags" icon={<IconFlag2 />}>
            Flags
          </SidenavItem>
          <SidenavItem aria-label="Events" icon={<IconChartLine />}>
            Events
          </SidenavItem>
          <SidenavItem aria-label="Settings" icon={<IconSettings />}>
            Settings
          </SidenavItem>
          <SidenavItem
            addonAfter={<IconExternalLink size="16" />}
            aria-label="Tutorial"
            asChild
            icon={<IconVocabulary />}
          >
            <a href="/">Tutorial</a>
          </SidenavItem>
        </SidenavBody>
 
        <SidenavFooter>
          <SidenavToggle icon={<IconLayoutSidebar />} />
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <SidenavAccountItem
                name="Rhaenyra Targaryen"
                organization="Optimizely"
                src="https://i.pravatar.cc/150?img=10"
              />
            </DropdownMenuTrigger>
 
            <DropdownMenuContent align="end" side="right">
              <DropdownMenuItem>View Profile</DropdownMenuItem>
              <DropdownMenuItem>Settings</DropdownMenuItem>
              <DropdownMenuItem>Logout</DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </SidenavFooter>
      </Sidenav>
    </Canvas>
  );
}

#
Anatomy

import {
  Sidenav,
  SidenavAccountItem,
  SidenavBody,
  SidenavFooter,
  SidenavHeader,
  SidenavItem,
  SidenavToggle,
} from "@optiaxiom/react";
 
export default () => (
  <Sidenav>
    <SidenavHeader>
      <SidenavItem />
    </SidenavHeader>
 
    <SidenavBody>
      <SidenavItem />
    </SidenavBody>
 
    <SidenavFooter>
      <SidenavToggle />
      <SidenavItem />
      <SidenavAccountItem />
    </SidenavBody>
  </Sidenav>
);

#
Props

#
Sidenav

Supports all Box props in addition to its own. Renders a <div> element.

Prop
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. false \| true
className string
defaultExpanded false \| true
expanded false \| true
onExpandedChange (expanded: boolean) => void

#
SidenavHeader

Supports all Box props in addition to its own. Renders a <div> element.

Prop
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. false \| true
className string

#
SidenavBody

Supports all Box props in addition to its own. Renders a <div> element.

Prop
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. false \| true
className string

#
SidenavItem

Supports all Button props in addition to its own. Renders a <button> element.

Prop
active false \| true
addonAfter Display content inside the button after `children`. ReactNode
addonBefore Display content inside the button before `children`. ReactNode
appearance Control the appearance by selecting between the different button types. "default" \| "danger" \| "primary" \| "subtle" \| "danger-outline" \| "inverse"
aria-label* string
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. false \| true
className string
disabled Whether the button is disabled. false \| true
icon Display an icon before or after the button content or omit `children` to only show the icon. ReactNode
iconOnly Whether button should have square shape. false \| true
iconPosition Control whether to show the icon before or after the button content. "end" \| "start"
loading Whether to show loading spinner inside the button. false \| true
size Control the size of the button. "sm" \| "md" \| "lg"

#
SidenavAccountItem

Supports all Box props in addition to its own. Renders a <button> element.

Prop
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. false \| true
className string
name string
organization string
src string

#
SidenavFooter

Supports all Box props in addition to its own. Renders a <div> element.

Prop
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. false \| true
className string

#
SidenavToggle

Supports all Button props in addition to its own. Renders a <button> element.

Prop
active false \| true
addonAfter Display content inside the button after `children`. ReactNode
addonBefore Display content inside the button before `children`. ReactNode
appearance Control the appearance by selecting between the different button types. "default" \| "danger" \| "primary" \| "subtle" \| "danger-outline" \| "inverse"
aria-label string
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. false \| true
className string
disabled Whether the button is disabled. false \| true
icon Display an icon before or after the button content or omit `children` to only show the icon. ReactNode
iconOnly Whether button should have square shape. false \| true
iconPosition Control whether to show the icon before or after the button content. "end" \| "start"
loading Whether to show loading spinner inside the button. false \| true
size Control the size of the button. "sm" \| "md" \| "lg"

#
Changelog

#
0.4.0

Added component

Select ALPHA

Skeleton