Sidebar

A composable, themeable and customizable sidebar component.

Usage

First of all, create a Sidebar component in your application.

Preview

Code

components/AppSidebar.jsx


"use client";
 
import {
  Calendar,
  House,
  PaperPlane,
  SearchMagnifyingGlass,
  Settings,
  Mail,
  Copy,
  FileDocument,
  Folders,
  Play,
  MoreVertical,
} from "@medway-ui/icons";
 
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuItemCollapse,
  SidebarMenuItemTitle,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
  useSidebar,
  Avatar,
  AvatarFallback,
  AvatarImage,
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@medway-ui/core";
 
// Menu items.
const menu = [
  {
    title: "Main",
    items: [
      {
        title: "Home",
        url: "#",
        icon: House,
        active: true,
        show: true,
        onClick: () => {},
      },
      {
        title: "Inbox",
        url: "#",
        icon: PaperPlane,
        active: false,
        show: true,
        onClick: () => {},
      },
      {
        title: "Calendar",
        url: "#",
        icon: Calendar,
        active: false,
        show: true,
        onClick: () => {},
      },
      {
        title: "Search",
        url: "#",
        icon: SearchMagnifyingGlass,
        active: false,
        show: true,
        onClick: () => {},
      },
      {
        title: "Settings",
        url: "#",
        icon: Settings,
        active: false,
        show: true,
        onClick: () => {},
      },
    ],
  },
  {
    title: "Resources",
    items: [
      {
        title: "Contents",
        url: "#",
        icon: Folders,
        active: false,
        show: true,
        onClick: () => {},
      },
      {
        title: "Lessons",
        icon: Play,
        active: false,
        show: true,
        subitems: [
          {
            title: "Lesson 1",
            url: "#",
            active: false,
            show: true,
            onClick: () => {},
          },
          {
            title: "Lesson 2",
            url: "#",
            active: false,
            show: true,
            onClick: () => {},
          },
          {
            title: "Lesson 3",
            url: "#",
            active: false,
            show: true,
            onClick: () => {},
          },
        ],
      },
      {
        title: "Flashcards",
        url: "#",
        icon: Copy,
        active: false,
        show: true,
        onClick: () => {},
      },
      {
        title: "Handouts",
        url: "#",
        icon: FileDocument,
        active: false,
        show: true,
        onClick: () => {},
      },
      {
        title: "Mailing",
        url: "#",
        icon: Mail,
        active: false,
        show: true,
        onClick: () => {},
      },
    ],
  },
];
 
function AppSidebar() {
  const { state, isMobile } = useSidebar();
  return (
        <Sidebar collapsible="icon" containerClassName="relative">
          <SidebarHeader>
              <SidebarMenu>
                <SidebarMenuItem>
                  <SidebarMenuButton
                    className="hover:bg-transparent"
                    size="lg"
                    variant="section"
                  >
                    <a href="#" className="shrink-0">
                      <Image
                        className="h-full w-full object-contain dark:brightness-0 dark:invert"
                        src={
                          isMobile || open
                            ? "/images/logo.svg"
                            : "/images/logo-short.svg"
                        }
                        alt="medway"
                        width={isMobile || open ? 108 : 28}
                        height={isMobile || open ? 22 : 20}
                        priority
                      />
                    </a>
                  </SidebarMenuButton>
                </SidebarMenuItem>
              </SidebarMenu>
            </SidebarHeader>
          <SidebarContent>
            {menu.map((menuGroup, index) => (
              <SidebarGroup key={index}>
                <SidebarGroupLabel>{menuGroup.title}</SidebarGroupLabel>
                <SidebarGroupContent>
                  <SidebarMenu>
                    {menuGroup.items
                      .filter((item) => item.show)
                      .map((item) => {
                        return (
                          <Collapsible
                            key={item.title}
                            asChild
                            defaultOpen={item.active}
                            className="group/collapsible"
                          >
                            <SidebarMenuItem isActive={item.active}>
                              <CollapsibleTrigger asChild>
                                  <SidebarMenuButton
                                    asChild
                                    isActive={item.active}
                                    tooltip={{
                                      children: item.title,
                                      side: "right",
                                      align: "center"
                                    }}
                                    onClick={item.onClick}
                                  >
                                  <a href={item.url!}>
                                    <SidebarMenuItemTitle
                                      icon={<item.icon />}
                                      title={item.title}
                                    />
                                    {"subitems" in item && item.subitems && (
                                      <SidebarMenuItemCollapse />
                                    )}
                                  </a>
                                </SidebarMenuButton>
                              </CollapsibleTrigger>
                              {"subitems" in item && item.subitems && (
                                <CollapsibleContent>
                                  <SidebarMenuSub>
                                    {item.subitems
                                      ?.filter((subItem) => subItem.show)
                                      ?.map((subItem, subIndex) => {
                                        return (
                                          <SidebarMenuSubItem key={subIndex}>
                                            <SidebarMenuSubButton
                                              asChild
                                              isActive={subItem.active}
                                              onClick={subItem.onClick}
                                            >
                                              <a href={subItem.url!}>
                                                <SidebarMenuItemTitle
                                                  title={subItem.title}
                                                />
                                              </a>
                                            </SidebarMenuSubButton>
                                          </SidebarMenuSubItem>
                                        );
                                      })}
                                  </SidebarMenuSub>
                                </CollapsibleContent>
                              )}
                            </SidebarMenuItem>
                          </Collapsible>
                        );
                      })}
                  </SidebarMenu>
                </SidebarGroupContent>
              </SidebarGroup>
            ))}
          </SidebarContent>
 
          <SidebarFooter>
            <SidebarMenu>
              <SidebarMenuItem>
                  <SidebarMenuButton size="lg">
                    <Avatar>
                      <AvatarImage
                        src="https://ui.shadcn.com/avatars/shadcn.jpg"
                        alt="John Doe"
                      />
                      <AvatarFallback>JD</AvatarFallback>
                    </Avatar>
                    <div className="ml-0.5 grid flex-1 text-left text-sm leading-tight text-primary-darken-2 dark:text-white">
                      <span className="truncate font-semibold">John Doe</span>
                    </div>
                    <MoreVertical
                      className="ml-auto fill-ring text-ring"
                      size={20}
                    />
                  </SidebarMenuButton>
              </SidebarMenuItem>
            </SidebarMenu>
          </SidebarFooter>
        </Sidebar>
  );
}
 
export { AppSidebar };

Provider

Then, add a SidebarProvider, SidebarTrigger and AppSidebar at the root of your application.

app/layout.tsx


import { SidebarProvider, SidebarTrigger } from "@medway-ui/core"
import { AppSidebar } from "@/components/AppSidebar"
 
export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <SidebarProvider>
      <AppSidebar />
      <main>
        <SidebarTrigger 
          showTooltip 
          enableHover 
          tooltipContent={{ 
            open: "Esconder sidebar", 
            closed: "Mostrar sidebar" 
          }} 
        />
        {children}
      </main>
    </SidebarProvider>
  )
}

Examples

The Sidebar component now supports enhanced tooltip functionality and hover effects:

SidebarTrigger: Use enableHover to show different icons on hover (ChevronLeftMd when open, ChevronRightMd when closed)
SidebarMenuButton: Use tooltip prop to show tooltips when the sidebar is collapsed
Custom tooltip content: Use tooltipContent prop on SidebarTrigger to customize tooltip messages

You can enable the hover effect on the SidebarTrigger by setting enableHover to true, which will show ChevronLeftMd when the sidebar is open and ChevronRightMd when closed on hover. You can also customize the tooltip content by setting tooltipContent with custom messages for open and closed states.

Preview

Code

components/AppSidebar.jsx


"use client";
 
import {
  Calendar,
  House,
  PaperPlane,
  SearchMagnifyingGlass,
  Settings,
  Mail,
  Copy,
  FileDocument,
  Folders,
  Play,
  MoreVertical,
  ArrowLeftRight
} from "@medway-ui/icons";
 
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuItemCollapse,
  SidebarMenuItemTitle,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
  useSidebar,
  Avatar,
  AvatarFallback,
  AvatarImage,
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
  Switcher,
} from "@medway-ui/core";
 
import { cn } from "@/lib/utils";
import { useState } from "react";
 
// Menu items.
const menu = [
  {
    title: "Main",
    items: [
      {
        title: "Home",
        url: "#",
        icon: House,
        active: true,
        show: true,
        onClick: () => {},
      },
      {
        title: "Inbox",
        url: "#",
        icon: PaperPlane,
        active: false,
        show: true,
        onClick: () => {},
      },
      {
        title: "Calendar",
        url: "#",
        icon: Calendar,
        active: false,
        show: true,
        onClick: () => {},
      },
      {
        title: "Search",
        url: "#",
        icon: SearchMagnifyingGlass,
        active: false,
        show: true,
        onClick: () => {},
      },
      {
        title: "Settings",
        url: "#",
        icon: Settings,
        active: false,
        show: true,
        onClick: () => {},
      },
    ],
  },
  {
    title: "Resources",
    items: [
      {
        title: "Contents",
        url: "#",
        icon: Folders,
        active: false,
        show: true,
        onClick: () => {},
      },
      {
        title: "Lessons",
        icon: Play,
        active: false,
        show: true,
        subitems: [
          {
            title: "Lesson 1",
            url: "#",
            active: false,
            show: true,
            onClick: () => {},
          },
          {
            title: "Lesson 2",
            url: "#",
            active: false,
            show: true,
            onClick: () => {},
          },
          {
            title: "Lesson 3",
            url: "#",
            active: false,
            show: true,
            onClick: () => {},
          },
        ],
      },
      {
        title: "Flashcards",
        url: "#",
        icon: Copy,
        active: false,
        show: true,
        onClick: () => {},
      },
      {
        title: "Handouts",
        url: "#",
        icon: FileDocument,
        active: false,
        show: true,
        onClick: () => {},
      },
      {
        title: "Mailing",
        url: "#",
        icon: Mail,
        active: false,
        show: true,
        onClick: () => {},
      },
    ],
  },
];
 
const switcherData = [
  {
    label: "Medway",
    items: [
      {
        id: "base-extensivo",
        label: "Base | Extensivo",
        icon: "/images/logo-short.svg",
        url: "/",
      },
      {
        id: "r1-extensivo",
        label: "R1 | Extensivo",
        icon: "/images/logo-short.svg",
        url: "/",
      },
      {
        id: "cursos-livres",
        label: "Cursos Livres",
        icon: "/images/logo-short.svg",
        url: "/",
      },
    ],
  },
  {
    label: "Medway+",
    items: [
      {
        id: "temi-papers",
        label: "TEMI Papers",
        icon: "/images/logo-short.svg",
        url: "https://temipapers.medway.com.br",
      },
      {
        id: "fundo-olho",
        label: "Fundo de olho",
        icon: "/images/logo-short.svg",
        url: "https://fundo-olho.medway.com.br",
      },
      {
        id: "cosmiatria-academy",
        label: "Cosmiatria Academy",
        icon: "/images/logo-short.svg",
        url: "https://cosmiatria-academy.medway.com.br",
      },
      {
        id: "alem-cirurgia",
        label: "Além da Cirurgia",
        icon: "/images/logo-short.svg",
        url: "https://alem-cirurgia.medway.com.br",
      },
      {
        id: "intensiva-veia",
        label: "Intensiva na veia",
        icon: "/images/logo-short.svg",
        url: "https://intensiva-na-veia.medway.com.br",
      },
    ],
  },
];
 
//
 
const footer = {
  label: "Conheçam mais cursos",
  icon: <ShoppingCart2 />,
};
 
function AppSidebar() {
  const { open, isMobile } = useSidebar();
  const [selectedCourse, setSelectedCourse] = useState("");
 
  return (
        <Sidebar collapsible="icon" containerClassName="relative">
          <SidebarHeader>
              <SidebarMenu>
                <SidebarMenuItem>
                  <Switcher
                    value={selectedCourse}
                    onValueChange={setSelectedCourse}
                  >
                    <SwitcherTrigger>
                      <SidebarMenuButton
                        className="group/switcher hover:bg-transparent"
                        size="lg"
                        variant="section"
                      >
                        <div className="flex w-full items-center justify-between gap-8">
                          <div className="shrink-0">
                            <Image
                              className="h-full w-full object-contain dark:brightness-0 dark:invert"
                              src={
                                isMobile || open
                                  ? "/images/logo.svg"
                                  : "/images/logo-short.svg"
                              }
                              alt="medway"
                              width={isMobile || open ? 108 : 28}
                              height={isMobile || open ? 22 : 20}
                              priority
                            />
                            <div
                              className={cn(
                                "mt-0.5 max-w-[160px] truncate text-xs font-semibold text-gray-foreground",
                                !open && !isMobile && "hidden"
                              )}
                            >
                              Extensivo Base
                            </div>
                          </div>
                          <div
                            className={cn(
                              "relative shrink-0 rounded-full border border-gray-stroke-muted p-2 group-hover/switcher:bg-gray-background-soft-emphasis group-data-[state=open]/switcher:bg-gray-background-soft-emphasis",
                              !open && "hidden"
                            )}
                          >
                            <ArrowLeftRight
                              size={20}
                              strokeWidth={1.5}
                              className="text-gray-foreground"
                            />
                          </div>
                        </div>
                      </SidebarMenuButton>
                    </SwitcherTrigger>
                    <SwitcherContent align="center" side="right">
                      {switcherData.map((group, groupIndex) => (
                        <div key={groupIndex}>
                          <SwitcherGroup label={group.label}>
                            {group.items.map((item) => (
                              <SwitcherItem
                                key={item.id}
                                value={item.id}
                                onClick={() => {
                                  window.open(item.url, "_blank");
                                }}
                                icon={item.icon}
                              >
                                {item.label}
                              </SwitcherItem>
                            ))}
                          </SwitcherGroup>
                        </div>
                      ))}
 
                      <SwitcherSeparator />
                      <SwitcherFooter
                        onClick={() => console.log("footer clicked")}
                        icon={footer.icon}
                      >
                        {footer.label}
                      </SwitcherFooter>
                    </SwitcherContent>
                  </Switcher>
                </SidebarMenuItem>
              </SidebarMenu>
            </SidebarHeader>
          <SidebarContent>
            {menu.map((menuGroup, index) => (
              <SidebarGroup key={index}>
                <SidebarGroupLabel>{menuGroup.title}</SidebarGroupLabel>
                <SidebarGroupContent>
                  <SidebarMenu>
                    {menuGroup.items
                      .filter((item) => item.show)
                      .map((item) => {
                        return (
                          <Collapsible
                            key={item.title}
                            asChild
                            defaultOpen={item.active}
                            className="group/collapsible"
                          >
                            <SidebarMenuItem isActive={item.active}>
                              <CollapsibleTrigger asChild>
                                <SidebarMenuButton
                                  asChild
                                  isActive={item.active}
                                  tooltip={{
                                    children: item.title,
                                    side: "right",
                                    align: "center"
                                  }}
                                  onClick={item.onClick}
                                >
                                  <a href={item.url!}>
                                    <SidebarMenuItemTitle
                                      icon={<item.icon />}
                                      title={item.title}
                                    />
                                    {"subitems" in item && item.subitems && (
                                      <SidebarMenuItemCollapse />
                                    )}
                                  </a>
                                </SidebarMenuButton>
                              </CollapsibleTrigger>
                              {"subitems" in item && item.subitems && (
                                <CollapsibleContent>
                                  <SidebarMenuSub>
                                    {item.subitems
                                      ?.filter((subItem) => subItem.show)
                                      ?.map((subItem, subIndex) => {
                                        return (
                                          <SidebarMenuSubItem key={subIndex}>
                                            <SidebarMenuSubButton
                                              asChild
                                              isActive={subItem.active}
                                              onClick={subItem.onClick}
                                            >
                                              <a href={subItem.url!}>
                                                <SidebarMenuItemTitle
                                                  title={subItem.title}
                                                />
                                              </a>
                                            </SidebarMenuSubButton>
                                          </SidebarMenuSubItem>
                                        );
                                      })}
                                  </SidebarMenuSub>
                                </CollapsibleContent>
                              )}
                            </SidebarMenuItem>
                          </Collapsible>
                        );
                      })}
                  </SidebarMenu>
                </SidebarGroupContent>
              </SidebarGroup>
            ))}
          </SidebarContent>
 
          <SidebarFooter>
            <SidebarMenu>
              <SidebarMenuItem>
                  <SidebarMenuButton size="lg">
                    <Avatar>
                      <AvatarImage
                        src="https://ui.shadcn.com/avatars/shadcn.jpg"
                        alt="John Doe"
                      />
                      <AvatarFallback>JD</AvatarFallback>
                    </Avatar>
                    <div className="ml-0.5 grid flex-1 text-left text-sm leading-tight text-primary-darken-2 dark:text-white">
                      <span className="truncate font-semibold">John Doe</span>
                    </div>
                    <MoreVertical
                      className="ml-auto fill-ring text-ring"
                      size={20}
                    />
                  </SidebarMenuButton>
              </SidebarMenuItem>
            </SidebarMenu>
          </SidebarFooter>
        </Sidebar>
  );
}
 
export { AppSidebar };

API

Sidebar Structure

Component	Description	Usage
SidebarProvider	Root component that manages the sidebar state	Must wrap the entire application where the Sidebar will be used
Sidebar	Main component that renders the sidebar	Main container for the entire sidebar structure
SidebarContent	Container for the sidebar content	Manages layout and scrolling of main content
SidebarHeader	Top section of the sidebar	Ideal for logos, titles or main controls
SidebarFooter	Bottom section of the sidebar	Useful for status information, user controls or secondary actions
SidebarGroup	Groups related items	Container for groups of items with common title
SidebarGroupLabel	Group title	Defines the header of a group of items
SidebarGroupContent	Container for group content	Wraps items within a group
SidebarGroupAction	Action button for a group	Contextual actions related to the group
SidebarMenu	List of menu items	Container for navigation items
SidebarMenuItem	Individual menu item	Container for a navigation item
SidebarMenuButton	Clickable menu button	Interactive element for navigation
SidebarMenuItemTitle	Item title and icon	Displays the visual content of the menu item
SidebarMenuItemCollapse	Menu item collapse	Displays the menu item with a collapse icon
SidebarMenuAction	Item action button	Contextual actions for a specific item
SidebarMenuBadge	Badge or counter	Displays additional information about the item
SidebarMenuSub	Submenu container	Groups nested submenu items
SidebarMenuSubItem	Submenu item	Container for a submenu item
SidebarMenuSubButton	Submenu button	Interactive element for submenu navigation
SidebarTrigger	Toggle button	Controls sidebar visibility
SidebarRail	Separator element	Visually separates sidebar from content
SidebarSeparator	Divider line	Separates sections within the sidebar
SidebarInput	Input field	Styled text field for the sidebar
SidebarInset	Content container	Adjusts main content to the sidebar
SidebarMenuSkeleton	Loading component	Displays loading state for menu items

Sidebar

Property	Type	Possible Values	Default	Description
side	”left” \| “right"	"left”, “right"	"left”	Defines which side the sidebar will be displayed on.
variant	”sidebar” \| “floating” \| “inset"	"sidebar”, “floating”, “inset"	"sidebar”	Defines the visual style of the sidebar.
collapsible	”offcanvas” \| “icon” \| “none"	"offcanvas”, “icon”, “none"	"offcanvas”	Defines the sidebar collapse behavior.
defaultOpen	boolean	true, false	true	Defines if the sidebar should be open by default.
open	boolean	true, false	-	Controls the sidebar open state (controlled).
onOpenChange	(open: boolean) => void	-	-	Callback called when the open state changes.
containerClassName	string	Any CSS class string	-	Additional CSS classes for the sidebar container element.

SidebarMenuButton

Property	Type	Possible Values	Default	Description
variant	”default” \| “outline"	"default”, “outline"	"default”	Defines the visual style of the menu button.
size	”md” \| “sm” \| “lg"	"md”, “sm”, “lg"	"md”	Defines the size of the menu button.
isActive	boolean	true, false	false	Defines if the menu button is active.
tooltip	string \| TooltipContentProps	-	-	Defines the text or settings for the button tooltip. When provided as string, it will be converted to TooltipContentProps with the string as children.
asChild	boolean	true, false	false	Allows rendering the button as a custom child element.

SidebarMenuSubButton

Property	Type	Possible Values	Default	Description
size	”sm” \| “md"	"sm”, “md"	"md”	Defines the size of the submenu button.
isActive	boolean	true, false	false	Defines if the submenu button is active. When active, applies active styling with semibold font weight and secondary foreground color.
asChild	boolean	true, false	false	Allows rendering the button as a custom child element.

SidebarTrigger

Property	Type	Possible Values	Default	Description
icon	React.ReactNode	Any React node	<HamburgerMd />	Icon displayed when the sidebar is closed.
className	string	Any CSS class string	-	Additional CSS classes for styling customization.
onClick	(event: React.MouseEvent) => void	-	-	Callback function called when the trigger is clicked.
showTooltip	boolean	true, false	false	Defines whether to show a tooltip when the trigger is hovered.
tooltipContent	{ open?: string; closed?: string }	-	{ open: "Esconder", closed: "Mostrar" }	Custom tooltip content for open and closed states.
sizeIcon	string	Any CSS class string	”size-5”	Defines the size of the icon.
enableHover	boolean	true, false	false	Defines whether the hover effect (icon change) is enabled. When enabled, shows ChevronLeftMd when open and ChevronRightMd when closed on hover.

Sidebar

Usage

Preview

Code

Provider

Examples

Sidebar with tooltip and hover effects

Sidebar with switcher header, hover effect on trigger and tooltip

Preview

Code

API

Sidebar Structure

Sidebar

SidebarMenuButton

SidebarMenuSubButton

SidebarTrigger