Mobile Navigation and Layout
On mobile, artist.tools uses a floating glass-style header that stays visible over the page and a swipeable drawer for navigation. The header contains a hamburger menu chip, a centered title pill, and a search chip. Navigation is available through the drawer, and entity pages can surface their own actions directly in the header when scrolled.
How the floating header works
The mobile header is a floating strip of chips that sits over your content rather than pushing it down. It is always visible and has three main areas:
Hamburger chip (left): Opens the navigation drawer. Labeled Open navigation menu.
Title pill (center): Shows the current page title, or switches to an entity identity when you are on an entity page and have scrolled enough to pin the entity header.
Search chip (right): Tapping it expands a full-width search input with a backdrop. Tapping the backdrop or the Close search button collapses it.
The search chip is hidden on the main Search page and on entity pages when the entity header is pinned, because those pages manage their own search or action UI.
Open and close the navigation drawer
On mobile, the navigation menu is a swipeable drawer instead of a persistent sidebar.
Tap the hamburger menu chip in the floating header.
The drawer slides out from the left with a full-screen backdrop.
Tap the backdrop or the Close sidebar button to close it.
The drawer also supports swipe gestures. You can drag it open or closed with a horizontal swipe. If your first motion is mostly vertical, the gesture is handed back to the page scroll instead. The drawer uses pointer capture so that releasing a drag does not accidentally tap an item behind it.
While the drawer is open, page scrolling is frozen so the background stays in place.
Entity pages and header actions
On entity detail pages (such as artist, playlist, track, or curator pages), the floating header adapts when you scroll:
The center pill switches from the page title to the entity identity, showing cover art and the entity name.
If the page has actions available, the right slot shows an entity actions menu instead of the search chip.
Tapping the entity pill or pressing Enter/Space opens the actions menu.
This means you can access save, alerts, or other entity actions without scrolling back to the top of the page.
Search and sticky toolbars on mobile
On pages with a prominent search bar, the floating header clears space so the search input can stay pinned while the rest of the page scrolls:
On the main Search page, the search bar stays pinned below the floating header while the filter bar scrolls away with the results.
On the Keyword Search page, the keyword search bar is similarly pinned, while the keyword filters scroll with the page.
Pinned toolbars use a progressive blur backdrop that extends into the floating header area so the transition between the header and the toolbar looks seamless.
Desktop vs mobile shortcuts
On desktop, you can press CTRL + B (or CMD + B on Mac) to toggle the sidebar, and CTRL + K (or CMD + K on Mac) to focus the search bar. On mobile, these shortcuts are replaced by the hamburger chip and the search chip in the floating header.