Browse menu: redesign as a popover with featured destinations - #12917
Merged
Conversation
Replace the Browse dropdown with the ol-popover web component. The menu now leads with four featured destinations — Subjects, Trending, Library Explorer, and Lists — each shown with an icon and a short description, so it's clearer at a glance where each link goes. The remaining items (Collections, K-12 Student Library, Book Talks, Random Book) follow below a divider as simple links. Also adds a pre-hydration rule so the popover content no longer flashes on page load before the component upgrades.
![accesslint[bot]](https://avatars.githubusercontent.com/in/1502?s=60&v=4){kind=small}
for more information, see https://pre-commit.ci
lokesh
marked this pull request as ready for review
June 15, 2026 20:25
# Conflicts: # static/css/components/header-bar.css
cdrini
approved these changes
Jun 19, 2026
Collaborator
There was a problem hiding this comment.
Nice looking great! Love the composability of the new components for stuff like this 🎉
A few points for discussion, but no blockers. Merge at your discretion!
Product feedback: I like that we're trying to create some hierarchy on what is otherwise a very long list :P But The grouping feels a bit arbitrary. Nothing actionable, just a note. I checked matomo to see what was most clicked to see if that elucidated anything, but not really :P Something we should think about in the future.
| Event Action | Events |
|---|---|
| MyBooks | 757 |
| Subjects | 161 |
| Trending | 100 |
| RandomBook | 76 |
| AdvancedSearch | 63 |
| Explore | 57 |
| Lists | 41 |
| Collections | 40 |
| K12Library | 36 |
| BookTalks | 11 |
UX Feedback:
- On mobile it's not full-width in the popover
- The hover effect effect colour clashes with the colour under the icon, and the line becomes a bit low contrast:
- The arrow on "Browse" is off center:
- The click region for "Browse" has become very small ; could use some padding
A11y Feedback:
When I open with the keyboard, it focuses on the entire menu instead of the first option? And if I then hit "tab", it goes to the last option.
| <div class="browse-popover__featured"> | ||
| <a class="browse-feature" href="/subjects" data-ol-link-track="$(pfx)|Subjects"> | ||
| <span class="browse-feature__icon" aria-hidden="true"> | ||
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"> |
Follow-up to the popover redesign, resolving @cdrini's review: UX - Mobile: let the panel fill the full-width bottom tray (<=767px) instead of staying pinned to the 240px desktop width. - Hover: deepen the icon tile to --beige on row hover so it stays distinct from the --lightest-grey row fill (fixes the low-contrast clash); also lighten --beige-three so the trigger hover reads. - Trigger: roomier click target (inset padding + negative margin to keep nav alignment), inline stroked chevron that rotates on open, centered via align-items on the nav components. Analytics - Open tracking on the popover's ol-popover-open event (pointer + keyboard), scoped to the browse popover rather than a global listener. - Surface dimension: distinct track_prefix for the mobile tray (MainNavMobile) vs. desktop (MainNav). - Position: each destination's 1-based rank in the event label. The keyboard focus-order a11y note is tracked separately and not addressed here.
Collaborator
Author
FIXED
FIXED
This will be resolved in a separate PR that beefs up our focus state behavior in our web components. #12931 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
feature — Redesigns the Browse menu in the top navigation bar.
What changes for the reader
Today, clicking Browse opens a plain, flat list of links. This PR rebuilds it using our new
ol-popovercomponent, and takes the opportunity to give the menu a hierarchy.The point of the hierarchy is focus: rather than presenting everything as equal, the menu draws attention to a few places worth exploring, while keeping the rest within reach. The menu opens centered under the Browse button with a smooth animation, and on phones it slides up as a bottom sheet you can swipe away.
Technical
openlibrary/templates/lib/browse_popover.html, which renders the menu using the newol-popoverweb component (openlibrary/components/lit/OlPopover.js) instead of a native<details>dropdown.ol-popoveralready handles positioning, focus trapping, Escape/outside-click close, reduced-motion, and the mobile bottom-tray behavior.nav_head.htmlnow rendersbrowse_popover(desktop + mobile headers) in place of the genericheader_dropdownfor Browse.browseLinksis unchanged and still feeds the hamburger menu, so nothing else is affected.currentColor. Analytics: links keep theirdata-ol-link-tracklabels, now carrying a 1-based position rank (featured 1–4, simple links 5–8) so we can see how far down patrons reach; a per-open event fires onol-popover-open(pointer + keyboard), scoped to the browse popover rather than a global listener; and the desktop popover vs. mobile tray are distinguished by track prefix (MainNav/MainNavMobile).static/css/components/header-bar.css(tokens only, within the0,3,0stylelint specificity cap). The mobile tray fills the full viewport width; the trigger has a roomier click target and an inline stroked chevron that rotates on open.static/css/ol-components.cssgets a small pre-hydration rule so the popover's content doesn't briefly flash on page load before the web component upgrades.Testing
/subjects,/trending,/explore,/lists,/collections,/k-12,/booktalks,/random).Screenshot
Stakeholders