Skip to content
Get Pro
Navigation

Side Nav

An app sidebar: a workspace switcher, search, labelled and collapsible sections, nested rows, badges and dots.

$149 once · every Pro piece

Customize

One active fill travels between rows and one hover light follows the pointer. It collapses to an icon rail without moving an icon (labels become tooltips, nested rows fly out to the side), resizes from its edge, toggles on ⌘\, and turns into a drawer on small screens. Takes your router's link component.

Install

npx shadcn@latest add @obsyde/side-nav

Needs your licence key · Get Pro

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { SideNav } from '@/components/obsyde/ember/side-nav/SideNav';

export function Example() {
  return (
    <SideNav />
  );
}

Files

What you get with Pro: plain React, TypeScript and CSS, with no dependencies.

  • ember/side-nav/SideNav.tsxcomponent
  • ember/side-nav/side-nav-demo.cssstyles
  • ember/side-nav/side-nav.cssstyles
  • ember/side-nav/icons.tsxmodule
  • ember/side-nav/SideNavDemo.tsxdemo
  • ember/nav-kit/motion.tsshared
  • ember/shared/spring.tsshared
  • ember/shared/accent.tsshared
  • ember/shared/ember.cssshared

API

PropTypeDefault
accentAccent'ember' | 'volt' | 'arc''ember'
collapsedCollapsedbooleanfalse
variantVariant'surface' | 'floating''surface'
densityDensity'comfortable' | 'compact''comfortable'
resizableResizablebooleantrue