---
url: "https://vueda.dev/v3/reference/theming/keys/SidebarMenuSubButton.md"
title: "SidebarMenuSubButton"
---

# SidebarMenuSubButton

Source: `client/lib/theme/vueda-tailwind/navigation/index.js`

> Nested sidebar control. Active state paints the sidebar rail through [--vueda-sidebar-active-rail](/v3/reference/theming/tokens/sidebar.md#css-token-vueda-sidebar-active-rail).

Vue component: [SidebarMenuSubButton](/v3/reference/api/vue/SidebarMenuSubButton.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/SidebarMenuSubButton.md#theme-key-SidebarMenuSubButton-root) | callback | Nested sidebar control. Active state paints the sidebar rail through [--vueda-sidebar-active-rail](/v3/reference/theming/tokens/sidebar.md#css-token-vueda-sidebar-active-rail). |

<a id="theme-key-SidebarMenuSubButton-root"></a>

## root

> Nested sidebar control. Active state paints the sidebar rail through [--vueda-sidebar-active-rail](/v3/reference/theming/tokens/sidebar.md#css-token-vueda-sidebar-active-rail).

Callback:

```javascript
({ size }) => ({
            class: [
                // Surface and interactive states.
                "text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent-active active:text-sidebar-accent-foreground",
                "[&>svg]:text-sidebar-accent-foreground",

                // Layout and spacing.
                "relative flex min-w-0 -translate-x-px items-center gap-2 rounded-vueda-control px-2",

                // Focus and disabled states.
                "focus-visible:focus-ring focus-visible:focus-ring-sidebar disabled:pointer-events-none disabled:opacity-50",
                "aria-disabled:pointer-events-none aria-disabled:opacity-50",

                // Icons and child elements.
                "[&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",

                // Active state.
                "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",

                // Active rail.
                "data-[active=true]:before:absolute data-[active=true]:before:inset-y-0 data-[active=true]:before:left-[-11px]",
                "data-[active=true]:before:w-(--vueda-sidebar-active-rail) data-[active=true]:before:bg-sidebar-primary data-[active=true]:before:content-['']",

                // Size classes.
                { "h-6 text-xs": size === "sm", "h-7 text-sm": size === "md" },

                // Collapsed state.
                "group-data-[collapsible=icon]:hidden",
            ],
        })
```

Source: `client/lib/theme/vueda-tailwind/navigation/SidebarMenuSubButton.theme.js:16`