Sliding Menu
Popover menu that can have nested subsections via a sliding animation.
Installation
npx shadcn@latest add https://raw.githubusercontent.com/FifthWit/ui/refs/heads/main/public/r/sliding-menu.jsonAnatomy
Import all parts and use them together
import {
SlidingMenu,
SlidingMenuTrigger,
SlidingMenuContent,
SlidingMenuPortal,
SlidingMenuPage,
SlidingMenuItem,
SlidingMenuSeperator,
} from "@/components/sliding-menu";<SlidingMenu>
<SlidingMenuTrigger></SlidingMenuTrigger>
<SlidingMenuPortal>
<SlidingMenuContent>
<SlidingMenuItem>
<SlidingMenuSeperator />
</SlidingMenuItem>
</SlidingMenuContent>
</SlidingMenuPortal>
</SlidingMenu>API Reference
SlidingMenu
Root container for all other items in the SlidingMenu
Prop
Type
SlidingMenuTrigger
Prop
Type
SlidingMenuPortal
Prop
Type
SlidingMenuContent
Prop
Type
SlidingMenuPage
Prop
Type
SlidingMenuItem
Prop
Type
SlidingMenuSeperator
A visual separator between menu items
Prop
Type
useSlidingMenu
Hook to access the sliding menu context. Must be used within a SlidingMenu component.
Returns:
{
currentPage: string;
navigateToPage: (pageId: string) => void;
navigateBack: () => void;
pageHistory: string[];
isOpen: boolean;
setIsOpen: (open: boolean) => void;
}