Hook Sidebar

A vertical navigation list with a dashed rail that marks the active item.

Mox UI

From Mox UI, the free component encyclopedia

Introduction

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Background

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Etymology

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

History

Early period

Modern era

Overview

Principles

Structure

Architecture

Components

Data flow

References

Installation

pnpm dlx shadcn@latest add mox/mox-ui/hook-sidebar

Run this command from your project directory to add the component and its dependencies.

1
Install the packages
pnpm add motion clsx tailwind-merge

Add the utility file

lib/utils.ts

import { clsx, type ClassValue } from "clsx";import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {  return twMerge(clsx(inputs));}

3
Copy and paste the code into your project
Loading source…
4
Update the import paths to match your project
Point @/lib/utils to your utility file if your path aliases differ.

Usage

app/page.tsx

import { HookSidebar } from "@/components/ui/hook-sidebar"
  // any item with an href makes the rail follow the current route  const display = [    { label: "Folder", href: "/folder" },    { label: "Code block", href: "/codeblock" },  ]
  const navigation = [{ label: "Liquid tab bar", href: "/liquidtabbar" }]
  // one HookSidebar per group, stacked  export function Demo() {    return (      <div className="flex flex-col gap-5">        <HookSidebar label="Display" items={display} />        <HookSidebar label="Navigation" items={navigation} />      </div>    )  }

Props

Prop	Type	Default	Description
`items*`	`Array<string \| { label: string; href?: string }>`	Default: `-`	Rows rendered as the vertical list. A plain string or an object with a label is a nav item, and href turns it into a link.
`label`	`string`	Default: `-`	Group title shown above the list, outside the rail. Omit it for a bare list. Also names the nav for screen readers.
`value`	`number`	Default: `-`	Active item index for controlled usage. When set, it wins over both the URL and internal state.
`defaultValue`	`number`	Default: `0`	Initial active index. Used only when no item has an href and value is not provided.
`onChange`	`(index: number) => void`	Default: `-`	Called with the new index whenever an item is selected.
`color`	`string`	Default: `"#FC4C01"`	Any CSS color for the active rail (hex, rgb, hsl, var). The hover rail stays neutral.
`dashed`	`boolean`	Default: `true`	Draws the rail and its corner as dashes. Set false for a solid line.
`className`	`string`	Default: `-`	Extra classes merged onto the root <nav> element.

Click an item to spring the accent rail down to it. Hovering or tabbing to another row draws a second, dimmer rail that stops where the accent one ends.

Credits and license

Most components here are recreations of great work from around the web. I don't claim to be the original creator - this is my attempt to reverse-engineer, replicate, and often add a few extra features. I've tried to credit everyone; if I missed someone, let me know.

Free to use and modify in both personal and commercial projects.
Attribution to Mox UI is appreciated when using a component.
Please don't resell the components as your own kit.

Contact Mox UI