Vertical Menu

A vertical list of links.

Source

Installation

npx @rahimstack@latest add vertical-menu

Usage

Collapsed

Settings collapsed prop to true will hide the text and only show the icons. You only need to set this prop to true on the top level VerticalMenu component. This is useful when you want a thin sidebar.

API Reference

const VerticalMenuAnatomy = defineStyleAnatomy({
    root: cva([
        "UI-VerticalMenu__root",
        "flex flex-col gap-1",
    ]),
    item: cva([
        "UI-VerticalMenu__item",
        "group/verticalMenu_item relative flex flex-none truncate items-center w-full font-medium rounded-[--radius] transition cursor-pointer",
        "hover:bg-[--subtle] hover:text-[--text-color]",
        "focus-visible:bg-[--subtle] outline-none text-[--muted]",
        "data-[current=true]:bg-[--subtle] data-[current=true]:text-[--foreground]",
    ], {
        variants: {
            collapsed: {
                true: "justify-center",
                false: null,
            },
        },
        defaultVariants: {
            collapsed: false,
        },
    }),
    itemContent: cva([
        "UI-VerticalMenu__itemContent",
        "w-full flex items-center relative",
    ], {
        variants: {
            size: {
                sm: "px-3 h-8 text-sm",
                md: "px-3 h-10 text-sm",
                lg: "px-3 h-12 text-base",
            },
            collapsed: {
                true: "justify-center",
                false: null,
            },
        },
        defaultVariants: {
            size: "md",
            collapsed: false,
        },
    }),
    parentItem: cva([
        "UI-VerticalMenu__parentItem",
        "group/verticalMenu_parentItem",
        "cursor-pointer w-full",
    ]),
    itemChevron: cva([
        "UI-VerticalMenu__itemChevron",
        "size-4 absolute transition-transform group-data-[state=open]/verticalMenu_parentItem:rotate-90",
    ], {
        variants: {
            size: {
                sm: "right-3",
                md: "right-3",
                lg: "right-3",
            },
            collapsed: {
                true: "top-1 left-1 size-3",
                false: null,
            },
        },
        defaultVariants: {
            size: "md",
            collapsed: false,
        },
    }),
    itemIcon: cva([
        "UI-VerticalMenu__itemIcon",
        "flex-shrink-0 mr-3",
        "text-[--muted]",
        "group-hover/verticalMenu_item:text-[--foreground]", // Item Hover
        "group-data-[current=true]/verticalMenu_item:text-[--foreground]", // Item Current
    ], {
        variants: {
            size: {
                sm: "size-4",
                md: "size-5",
                lg: "size-6",
            },
            collapsed: {
                true: "mr-0",
                false: null,
            },
        },
        defaultVariants: {
            size: "md",
        },
    }),
    subContent: cva([
        "UI-VerticalMenu__subContent",
        "border-b py-1",
    ]),
})