components

Navigation

SideNavigation renders a vertical navigation menu typically used as a sidebar. Each SideNavigationItem is a link with an href, target, and active state. Set the active prop on the item that corresponds to the current page. The component handles link rendering and styling internally — you don't need to wrap items in anchor tags.

Import

import { SideNavigation, SideNavigationItem, SideNavigationGroup } from "@skedulo/breeze-ui-react";

Usage Guidance

When to use

+Build sidebar navigation for multi-section applications.
+Provide persistent navigation that shows the current location.
+Create grouped navigation with collapsible sections.

When not to use

−For in-page content switching — use Tabs.
−For top-level app navigation — use a custom top bar.
−For action lists — use Menu.

Examples

Code Samples

Basic Side Navigation

A vertical nav with several items. The second item is marked as active.

import { SideNavigation, SideNavigationItem } from "@skedulo/breeze-ui-react";

export default function BasicNav() {
  return (
    <SideNavigation>
      <SideNavigationItem href="/dashboard">Dashboard</SideNavigationItem>
      <SideNavigationItem href="/jobs" active>Jobs</SideNavigationItem>
      <SideNavigationItem href="/resources">Resources</SideNavigationItem>
      <SideNavigationItem href="/settings">Settings</SideNavigationItem>
    </SideNavigation>
  );
}

Guidelines

Do

✓Highlight the active item to show current location.
✓Use groups to organize related navigation items.
✓Keep navigation labels concise.

Don't

✗Don't deeply nest navigation items (max 2 levels).
✗Don't mix navigation with actions in the same sidebar.

API Reference

Prop	Type	Default	Description
href	string	—	Link destination for the navigation item.
target	string	—	Link target attribute (e.g. "_blank").
active	boolean	false	Highlights the item as the currently active page in the navigation.

Related Components

Tabs Menu Link