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

# SidebarMenuBadge

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

> Count or status badge anchored to a menu button. Tone handling stays local to sidebar tokens and hides in icon-collapsed mode.

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

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/SidebarMenuBadge.md#theme-key-SidebarMenuBadge-root) | callback | Count or status badge anchored to a menu button. Tone handling stays local to sidebar tokens and hides in icon-collapsed mode. |

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

## root

> Count or status badge anchored to a menu button. Tone handling stays local to sidebar tokens and hides in icon-collapsed mode.

Callback:

```javascript
({ tone }) => ({
            class: [
                // Positioning and layout.
                "pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-vueda-control px-1",

                // Type.
                "font-mono text-[length:var(--vueda-text-micro)] font-semibold tabular-nums select-none",

                // Size alignment.
                "peer-data-[size=sm]/menu-button:top-1",
                "peer-data-[size=default]/menu-button:top-1.5",
                "peer-data-[size=lg]/menu-button:top-2.5",

                // Tone classes.
                {
                    "bg-sidebar-accent text-sidebar-foreground peer-data-[active=true]/menu-button:bg-[color-mix(in_oklab,var(--sidebar-primary)_14%,transparent)] peer-data-[active=true]/menu-button:text-sidebar-primary-text":
                        !tone || tone === "neutral",
                    "bg-[color-mix(in_oklab,var(--sidebar-primary)_14%,transparent)] text-sidebar-primary-text":
                        tone === "primary",
                    "bg-[color-mix(in_oklab,var(--destructive)_14%,transparent)] text-destructive":
                        tone === "destructive",
                },

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

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