Skip to main content
A navigation item for the sidebar that automatically resolves title and icon from the resource definition’s meta corresponding to the URL specified in to.

​
Import

import { SidebarItem } from "@tailor-platform/app-shell";

​
Usage

​
Auto-resolved from resource meta

The simplest way to use SidebarItem is to provide only the to prop. The title and icon will be automatically resolved from your resource definitions: 
<DefaultSidebar>
  <SidebarItem to="/dashboard" />
  <SidebarItem to="/products" />
</DefaultSidebar>

​
Override title and icon

You can override the auto-resolved title and icon: 
import { Home } from "lucide-react";

<SidebarItem to="/" title="Home" icon={<Home />} />
External URLs are automatically detected and rendered with an external link icon: 
<SidebarItem to="https://docs.example.com" external />

​
Custom rendering with render prop

For full control over the rendered UI, use the render prop: 
import { Badge } from "@tailor-platform/app-shell";

<SidebarItem
  to="/tasks"
  render={({ title, icon, isActive }) => (
    <>
      {icon}
      <span>{title}</span>
      {isActive && <Badge variant="success">5</Badge>}
    </>
  )}
/>

​
Props

​
to
string
required
Target URL. External URLs (starting with http:// or https://) are rendered as external links.
​
title
string
Override title. When omitted, title is auto-resolved from resource meta.
​
icon
ReactNode
Override icon. When omitted, icon is auto-resolved from resource meta.
​
external
boolean
Opens link in new tab with target="_blank". When true, adds an external link icon and opens in new tab.
​
activeMatch
'exact' | 'prefix'
default:"'prefix'"
How to match the current path for active state:
  • "exact": Only highlight when the path matches exactly
  • "prefix": Highlight when the current path starts with to (with segment boundary check)
​
render
(props: SidebarItemRenderProps) => ReactNode
Custom rendering function. When specified, receives title, icon, url, and isActive for full customization.

​
Render Prop

When using the render prop, you receive SidebarItemRenderProps:
PropertyTypeDescription
titlestringResolved title (from override or resource meta)
urlstringTarget URL
iconReactNode | undefinedResolved icon
isActivebooleanWhether this item is currently active

​
Examples

​
Basic sidebar navigation

import {
  DefaultSidebar,
  SidebarItem,
  SidebarSeparator,
} from "@tailor-platform/app-shell";
import { Home, Package, Settings } from "lucide-react";

const CustomSidebar = () => (
  <DefaultSidebar>
    <SidebarItem to="/" title="Home" icon={<Home />} />
    <SidebarSeparator />
    <SidebarItem to="/products" />
    <SidebarItem to="/orders" />
    <SidebarSeparator />
    <SidebarItem to="/settings" icon={<Settings />} />
  </DefaultSidebar>
);

​
With custom badges

import { Badge } from "@tailor-platform/app-shell";

<SidebarItem
  to="/notifications"
  render={({ title, icon, isActive }) => (
    <div className="flex items-center justify-between w-full">
      <div className="flex items-center gap-2">
        {icon}
        <span className={isActive ? "font-bold" : ""}>{title}</span>
      </div>
      <Badge variant="error">3</Badge>
    </div>
  )}
/>

<DefaultSidebar>
  <SidebarItem to="/dashboard" />
  <SidebarItem to="/products" />
  <SidebarSeparator />
  <SidebarItem 
    to="https://docs.example.com" 
    title="Documentation" 
    external 
  />
  <SidebarItem 
    to="https://support.example.com" 
    title="Support" 
    external 
  />
</DefaultSidebar>

Build docs developers (and LLMs) love

Get started for freeTalk to us