Skip to content

[bug]: SidebarMenuButton size='lg' doesn't collapse properly to icon-only mode #8975

@rabin-thami

Description

@rabin-thami

Describe the bug

Bug: SidebarMenuButton size="lg" doesn't collapse properly to icon-only mode

Description

When using <SidebarMenuButton size="lg">, the button doesn't properly collapse to icon-only mode when the sidebar is in collapsible="icon" state. The text remains visible instead of being hidden like it does with size="default".

Steps to Reproduce

  1. Create a sidebar with collapsible="icon" mode
  2. Add a <SidebarMenuButton tooltip="Title" size="lg"> containing an icon and text
  3. Collapse the sidebar to icon-only mode
  4. Observe that the text is still visible

Expected Behavior

The button should shrink to 32x32px (icon-only) when collapsed, matching the behavior of size="default".

Actual Behavior

The button retains its full height (48px) and text remains visible when collapsed.

Root Cause

In sidebarMenuButtonVariants, the base class includes group-data-[collapsible=icon]:size-8! which constrains the button size when collapsed. However, the lg variant only has:

lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',
Image

Affected component/components

Sidebar

How to reproduce

  1. Use the @shadcn/ui sidebar with collapsible="icon" enabled.
  2. Add a <SidebarMenuButton size="lg"> containing an icon and text.
  3. Collapse the sidebar to icon-only mode.
  4. Notice that the text is still visible and the button stays h-12 instead of collapsing to size-8.

### System Info

```bash
**System Info**

- Operating System: Windows 10
- Browser: Chrome 143 (latest)
- Node.js: v20+
- Next.js: v15 (App Router)
- @shadcn/ui: latest version
- Tailwind CSS: v4
- Using: `<SidebarMenuButton size="lg">`
- Sidebar: `collapsible="icon"`

Before submitting

  • I've made research efforts and searched the documentation
  • I've searched for existing issues

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions