Navigation contains content that allows movement between primary destinations in an app.

onClose

open

() => {
  const [open, setOpen] = useState<boolean>(false);

  return (
    <>
      <NavigationButton onClick={() => setOpen((old) => !old)}>Compact navigation</NavigationButton>
      <SideNavigation aria-label="Demo navigation" open={open} onClose={() => setOpen(false)}>
        <SideNavigation.Item icon={<IconDashboard />}>Home</SideNavigation.Item>
        <WorkspaceAccordion title="Menu" active />
        <WorkspaceAccordion title="Menu" />
        <WorkspaceAccordion title="Menu" />
      </SideNavigation>
    </>
  );
}

SideNavigation

() => {
  return (
    <Box as="nav" display="flex" gap="$8" backgroundColor="background.panels">
      <SideNavigation.Item aria-current="true" icon={IconDashboard} aria-label="Home" round />
      <SideNavigation.Item icon={IconSettingsSliders} aria-label="Settings" round withIndicator />
      <SideNavigation.Item icon={IconCode} aria-label="Code" round />
    </Box>
  );
}

Side navigation is available in round variant for icon-only navigation use


Name	Description	Default
onClose required		-
open required		-

Side Navigation component

Round