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

# SidebarMenuButtonChild

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

> Primary sidebar menu button content. Active state uses a rail and icon tint, not a type-weight bump, so hover does not shift label width.

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

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/SidebarMenuButtonChild.md#theme-key-SidebarMenuButtonChild-root) | callback | Primary sidebar menu button content. Active state uses a rail and icon tint, not a type-weight bump, so hover does not shift label width. |

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

## root

> Primary sidebar menu button content. Active state uses a rail and icon tint, not a type-weight bump, so hover does not shift label width.

Callback:

```javascript
({ variant, size }) => ({
            class: [
                // Layout and spacing.
                "peer/menu-button relative flex w-full items-center gap-2 rounded-vueda-control p-2 text-left text-sm",

                // Interactive states.
                "transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
                "focus-visible:focus-ring focus-visible:focus-ring-sidebar active:bg-sidebar-accent-active active:text-sidebar-accent-foreground",

                // Disabled and action states.
                "disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8",
                "aria-disabled:pointer-events-none aria-disabled:opacity-50",

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

                // Collapsed state.
                "group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2!",

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

                // Active rail.
                "data-[active=true]:before:absolute data-[active=true]:before:inset-y-0 data-[active=true]:before:left-0",
                "data-[active=true]:before:w-(--vueda-sidebar-active-rail) data-[active=true]:before:bg-sidebar-primary data-[active=true]:before:content-['']",
                "group-data-[collapsible=icon]:data-[active=true]:before:hidden",
                "data-[active=true]:[&>svg]:text-sidebar-primary",

                // Variant classes. The neutral hover (bg / text) is applied
                // unconditionally above, so only the outline-specific surface and
                // hairline edge (with its hover recolour) are expressed per-variant here.
                {
                    "bg-background hairline [--vueda-hairline-color:var(--sidebar-border)] hover:[--vueda-hairline-color:var(--sidebar-accent)]":
                        variant === "outline",
                },

                // Size classes. Default text size (text-sm) comes from the base above;
                // only the sm tier overrides it (text-xs).
                {
                    "h-8": !size || size === "default",
                    "h-7 text-xs": size === "sm",
                    "h-12": size === "lg",
                },
            ],
        })
```

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