Skip to content

Fix collapsed sidebar group keyboard navigation#2649

Open
joshhanley wants to merge 1 commit into
mainfrom
josh/fix-collapsed-sidebar-group-keyboard-navigation
Open

Fix collapsed sidebar group keyboard navigation#2649
joshhanley wants to merge 1 commit into
mainfrom
josh/fix-collapsed-sidebar-group-keyboard-navigation

Conversation

@joshhanley

@joshhanley joshhanley commented Jun 9, 2026

Copy link
Copy Markdown
Member

This has a corresponding Flux Pro PR https://github.com/livewire/flux-pro/pull/506

The Scenario

Currently, if you have a collapsed sidebar that contains an expanded sidebar group, you cannot focus the group trigger, open the dropdown, and then reliably navigate inside the dropdown using the keyboard.

Pressing Space or Enter opens the dropdown, but focus does not move to the first item. That leaves keyboard users without a working path into the dropdown links. When focus does land on an item, it can also show a focus ring instead of matching the active background treatment used by standard Flux dropdown menu items.

CleanShot 2026-06-09 at 19 37 47
<flux:sidebar collapsible>
    <flux:sidebar.nav>
        <flux:sidebar.group expandable expanded icon="star" heading="Favorites">
            <flux:sidebar.item href="#marketing-site">Marketing site</flux:sidebar.item>
            <flux:sidebar.item href="#android-app">Android app</flux:sidebar.item>
            <flux:sidebar.item href="#brand-guidelines">Brand guidelines</flux:sidebar.item>
        </flux:sidebar.group>
    </flux:sidebar.nav>
</flux:sidebar>

The Problem

Collapsed sidebar group dropdowns render sidebar items inside a menu. ui-menu already focuses the first item when opened with ArrowDown, but collapsed sidebar group dropdowns also need that first-item focus when opened with Space or Enter.

The sidebar item styles also handled hover state in this dropdown context, but did not style data-active or suppress the item focus outline. That made keyboard-focused dropdown items visually differ from standard Flux menu items.

The Solution

Keep the existing ArrowDown menu behaviour unchanged, and add a scoped Space/Enter path only when the dropdown has data-flux-sidebar-group-dropdown. When that scoped path opens the menu, the first menu item receives focus so arrow-key navigation works from inside the dropdown.

Also style data-active for sidebar items inside collapsed group dropdowns and hide the per-item focus outline in that dropdown context, matching normal menu active-state styling.

(dropdown menu items do have a background colour, just not shown in the compressed gif)
CleanShot 2026-06-09 at 19 34 02

Fixes #2643

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Collapsible sidebar bugs: keyboard navigation, logo/icon toggle, focus

1 participant