Skip to content
WingoUI
ComponentsTemplatesDocsPricingAI agentsBlogChangelogContact
Components
Buttons & Actions
ButtonButton GroupCopy ButtonDelete ButtonTheme ToggleToggleToggle Group
Inputs
Avatar UploadCalendarCheckboxColor PickerComboboxCountry SelectCron PickerCurrency InputDate PickerDate Range PickerDate Time PickerDuration PickerEmail InputEmoji PickerFile UploadFilter BuilderInputInput GroupListboxMasked InputMention InputMonth PickerMulti SelectNumber InputOTP InputPassword InputPhone InputRadio GroupRatingSearch InputSegmented ControlSelectSignature PadSliderSwitchTag InputTextareaTime PickerTimezone SelectTree Select
Forms
Address InputBooking WidgetCSV ImportFieldForm WizardInline EditInvoice line itemsRich Text EditorSchema Builder
Navigation
Back To TopBounce SidebarBreadcrumbCommand MenuGlobal SearchGooey NavHook SidebarNav MenuNav TabsPaginationProximity SidebarScroll ProgressSidebarStepsTable Of ContentsTabsTopbarUser MenuWorkspace Switcher
Overlays
Alert DialogContext MenuDialogDrawerDropdown MenuFamily DrawerHover CardPopoverShare DialogSheetShortcuts DialogTooltipTour
Feedback
AlertBannerCookie ConsentEmoji ReactionEmpty StateNotification BellNotification CenterProgressRoute ProgressSetup ChecklistSkeletonSpinnerToast
Data Display
Approval FlowAvatarBadgeCalendar ViewCode BlockComment ThreadContact cardCountdownDescription ListDiff ViewerFile ListFile managerFolderGanttJSON ViewerKbdLog ViewerMarkdownPresenceSchedulerTagTimelineTree View
Tables & Lists
Audit LogData TableDeal PipelineEditable GridKanbanListMembers tablePermissions MatrixTableTask ListVirtual List
Charts & Stats
Animated CounterArea chartBar chartDonut chartFunnel chartGaugeGitHub ActivityHeatmap calendarLeaderboardLine chartRadar chartRadial barSparklineStat CardTrackerTrend badge
Layout
AccordionApp ShellCardCollapsibleDetail LayoutEntity HeaderPage HeaderScroll AreaSeparatorSettings LayoutSplit ViewToolbar
Media
Audio PlayerCarouselCSV ViewerDOCX EditorDOCX ViewerExcel ViewerFile SystemImage compareImage CropperImage GalleryImage LightboxLocation MapPDF ViewerPowerPoint ViewerQR CodeStep PlayerVideo Player
AI Kit
Agent Status CardChat MessageChat ThreadChat WidgetConversation ListFluid OrbGrid RevealMatrix OrbModel PickerPrompt InputReasoning IndicatorRule BuilderSuggestion ChipsTool Call TimelineUsage MeterVoice InputWorkflow Canvas
Text & Effects
Background PatternGravity LettersMarqueeTerminalText AnimateText Rotate
Mobile
Action SheetBottom Tab BarFABHaptic ButtonHero HeaderInstall PromptLarge Title HeaderNotification BannerOnboarding CarouselPicker WheelPull To RefreshSlide To ConfirmSticky CTA BarSwipe DeckSwipeable Tabs
Commerce
Cart drawerCategory pickerCheckout stepsCoupon inputFavorite buttonFilter panelListing cardListing gridOrder trackerPricePrice rangePricing tableProduct galleryQuantity stepperReviewsSeller card
Marketing Sections
App Download SectionBlog Cards SectionCTA SectionFAQ SectionFeature GridFeature ShowcaseHero SectionIntegrations SectionLogo CloudMarketing FooterMarketing HeaderMarketing SectionNewsletter SectionPricing SectionStats SectionSteps SectionTeam SectionTestimonials SectionTimeline SectionVideo Section
Blocks
Admin Dashboard PageAdmin ShellAI Chat PageAPI Keys PageAutomation Builder PageCheckout PageCRM Contact PageCRM Pipeline PageError PagesInbox PageInvoice PageKPI DashboardListing Detail PageLogin PageMarketplace Home PageMarketplace Search PageMarketplace ShellMobile App HomeOnboarding FlowOrder History PagePost Listing WizardPricing PageProfile PageRegister PageSettings PageUsers Admin Page
Templates
About PageAcademy PageAccessibility PageAffiliate PageAgency PageAI Product PageAppointment Booking PageBlog PageBlog Post PageBug Bounty PageCareers PageChangelog PageCommunity PageCompare PageContact PageCustomer Story PageCustomers PageDemo Booking PageDevelopers PageDocs Home PageDownload PageEnterprise PageEvents PageExperts PageFAQ PageFeature PageGlossary PageHelp Article PageHelp Center PageHome Services PageImpact PageIntegration Detail PageIntegrations PageJob Detail PageLanding PageLaunch PageLegal PageManifesto PagePortfolio PagePress PageProduct Tour PagePromo PageReal Estate PageReferral PageResearch Report PageRestaurant PageRoadmap PageROI Calculator PageSecurity PageSolutions PageStartups PageStatus PageStorefront PageSwitch PageTemplate Gallery PageTravel PageWaitlist PageYear in Review Page
Hooks & Utilities
AI ChatChart kitCommerceDate utilsFile exportFile typesFiltersForm validationHapticsInvoicingMotion presetsNavigationNumber formatRelative timeRomanian locationsSpreadsheetText matchTonesUIProvideruseClipboarduseConsentuseControllableStateuseCooldownuseDebounceuseKeyboardInsetuseLocaleuseLongPressuseMediaControlsuseMediaQueryuseOverflowItemsusePersistedStateuseScrollEdgesuseScrollStateuseSelectionuseShortcutuseStickToBottom
GalleryTheme

Navigation

Hook Sidebar

Navigation

Hook Sidebar React component for Tailwind CSS v4

Gooey NavNav Menu
Live props
Content
label
Appearance
color
dashed
size
textColor
activeTextColor
hoverColor
gap2px
cornerRadius6px
Code
import { HookSidebar } from "@/components/ui/hook-sidebar"

<HookSidebar />
  1. Home
  2. Components
  3. Navigation
  4. Hook Sidebar
Free

Hook Sidebar React component for Tailwind CSS v4

v1.0.1·Updated in 1.2.1

A React sidebar navigation list with a dashed rail that springs down and hooks into the active item, for docs and settings.

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. When the items have hrefs, the rail follows the current route on its own.

Hook Sidebar is a free React component in the React navigation components category, written in TypeScript for React 19 and Tailwind CSS v4. It installs as source with npx wingo-ui@latest add hook-sidebar, together with Motion presets and UIProvider and the npm package motion.

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

npx wingo-ui@latest add hook-sidebar

Usage

Import HookSidebar from @/components/ui/hook-sidebar.

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: "Gooey nav", href: "/gooeynav" }]

// 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

  • items*
    Array<string | { label: string; href?: string }>

    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.

  • labeldefault ""
    string

    Group title shown above the list, outside the rail. Leave it empty for a bare list. Also names the nav for screen readers.

  • colordefault "#FC4C01"
    string

    Any CSS color for the active rail (hex, rgb, hsl, var). The hover rail stays neutral.

  • dasheddefault true
    boolean

    Draws the rail and its corner as dashes. Set false for a solid line.

  • sizedefault "md"
    "sm" | "md" | "lg"

    Row text size and padding: 12px (sm), 14px (md) or 16px (lg) labels. On touch screens every row is at least 44px tall.

  • textColordefault "auto"
    string

    Color of the rows that are not active, any CSS color. Auto is the foreground at 70% opacity, so it follows the light and dark theme.

  • activeTextColordefault "auto"
    string

    Color of the active row and of any row under the pointer, any CSS color. Auto is the foreground color.

  • hoverColordefault "auto"
    string

    Color of the dimmer rail drawn to the row under the pointer or focus, any CSS color. Auto is the foreground at 30% opacity.

  • gapdefault 2
    number

    Space between rows in pixels. The rail re-measures and springs to the new row centers.

  • cornerRadiusdefault 6
    number

    Radius in pixels of the curve where the rail turns into the active row, and how far the rail stops short of the row's center.

  • value
    number

    Active item index for controlled usage. When set, it wins over both the URL and internal state. Pass -1 to hide the accent rail.

  • defaultValuedefault 0
    number

    Initial active index. Used only when no item has an href and value is not provided.

  • onChange
    (index: number) => void

    Called with the new index whenever an item is selected.

  • className
    string

    Extra classes merged onto the root <nav> element. Any other <nav> attribute is passed through too.

Parts

  • HookSidebarItem

    type

    One entry of items: a plain string (a button), or { label, href? } where href renders a link that is active on its own route.

Examples

Project navigation

Controlled with value and onChange: the rail springs to the chosen section and the panel beside it follows.

Sizes

sm, md and lg scale the type and the row height; on touch screens every size keeps a 44px row.

Stacked groups

One sidebar per group. Pass -1 as the value of every group that does not hold the selection.

Solid rail

Set dashed to false for a continuous line, and color for the accent.

Dependencies

motionmotionui-config

Files

  • components/ui/hook-sidebar.tsx

FAQ

Is the React Hook Sidebar component free?

Yes. The source is free and needs no account: copy it from the Code tab or install it with the CLI.

How do I install Hook Sidebar?

Run npx wingo-ui@latest add hook-sidebar. It also adds the Wingo UI items it builds on (Motion presets and UIProvider) and the npm package motion. With shadcn, run npx shadcn@latest add https://wingo-ui.com/r/hook-sidebar.json.

See also

Bounce SidebarProximity SidebarTable Of ContentsSidebarNav Tabs

More React navigation components

Gooey NavUser MenuNav MenuBack To TopCommand MenuGlobal Search
All 19 React navigation components
PreviousGooey NavNext Nav Menu

Hook Sidebar

A section list whose rail bends into the entry you are reading.

Overview

The hook sidebar is a vertical list of sections with a thin rail running down its left edge. Where the rail meets the active entry it hooks in toward the label, so the current place in the page is drawn as part of the line itself.

When to use it

It suits documentation, long settings pages and anything with a handful of named sections. Several sidebars can stack, one per group, with only the group that holds the selection showing its accent.

Why it exists

A highlighted row competes with the content for attention. A rail that bends toward the active entry marks it clearly while leaving the text itself untouched.

Motion

Selecting another entry springs the accent rail down or up to meet it, and the hook reforms beside the new label.

Hover preview

Hovering or tabbing to a different row draws a second, dimmer rail from the active entry toward it. It shows where a click would take you before you commit to it.

Following the page

Drive the value from the scroll position, as this demo does, and the rail tracks the section being read. With hrefs on the items it follows the current route instead.

Anatomy

An optional label heads the list. Below it, each entry is a button or a link, and the neutral rail, the hover rail and the accent rail with its hook are drawn along their left edge.

Dashed or solid

The rail is dashed by default, which keeps it light next to body text. Set dashed to false for a continuous line when the sidebar sits on its own.

Accent color

Pass any CSS color to color. It tints the accent rail, while the hover rail stays neutral so the two never get confused.

Accessibility

Entries are real buttons or links, so the list works with Tab, Enter and Space. The group label names the navigation for screen readers, and the rail is decorative and hidden from them.

Contrast

Inactive entries use a softer text color and the active one the full text color, so the accent only has to stand out as a line and never carries the text itself.

Related

The hook sidebar is part of Wingo UI, where it sits next to the bounce sidebar and the proximity sidebar.

Further reading

The bounce sidebar marks the active entry with a hopping dot, and the proximity sidebar turns the whole page into a minimap of dashes. Pick whichever matches how much space you have.