# Mobile website bottom bar > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is A bottom navigation bar for a phone website, not a native app. The site is "Depot 41", a strength gym in an old tram depot in Porto. Five items sit in a 64px bar with a 2px black top rule: Home, Coaches, Book, Prices, Visit. Book is a raised 60px safety-orange square with a hard black offset shadow. The active item gets a 4px orange mark on the top rule and follows the section you are reading. The bar hides when you scroll down and comes back when you scroll up or reach the end. The detail worth copying is that it behaves like a website: items are anchor links to page sections, and it sits above the browser's own bottom toolbar. ### When to use it - Use it for sites people come back to often on a phone: a gym timetable, a restaurant that takes orders, a booking site, a club, a PWA. - Use it when there are three to five places people jump between, and one action that matters most (Book, Order). - Do not use it on a marketing page, a portfolio, a launch page or an article. People read those once from top to bottom. Use a header with a hamburger there (`hamburger-circle-reveal` or `mobile-fullscreen-menu`). - Do not use it with a sticky bottom call-to-action bar (`cta-sticky-mobile-bar`) on the same page. Pick one. ## Reference behaviour 1. First frame: the page is at the top. The bar is visible. Home has `aria-current="true"` and the orange mark. 2. Scroll down more than 6px past 80px from the top: the bar slides down out of view over 220ms `cubic-bezier(.4,0,1,1)`. 3. Scroll up more than 6px: the bar slides back over 280ms `cubic-bezier(.16,1,.3,1)`. 4. Reach the end of the page (within 8px): the bar comes back, even if you were scrolling down, and Visit becomes current. 5. Scroll position under 80px: the bar is always shown. 6. While scrolling, the current item is the last section whose top is above 40% of the screen height. Its mark grows from `scaleX(0)` to `scaleX(1)` over 160ms. 7. Tap an item: the page smooth-scrolls to that section. The current item updates as the section arrives. 8. Tap Book: the page scrolls to "Today", the class list. When Book is current, its label gets a 2px orange underline. 9. Press Book: the orange square moves 3px right and 3px down and its shadow shrinks from 4px to 1px, like a key being pressed. 10. Tab into the bar while it is hidden: it slides back so focus is never on something off screen. 11. In the class list, "Book" buttons toggle to "Booked" (`aria-pressed`). "Full" is disabled. ## Structure ``` 390 x 844 (54px status reserve on top, 84px browser bar drawn over the bottom) +--------------------------------------+ | DEPOT[41] [] Open until 22:00 | 56px, 2px black rule under | LIFT HEAVY. | 64px condensed 800 | COME BACK TOMORROW. | | ...lede, 3 fact cells... | | TODAY THU 8 OCT | sections, 2px rule on top | 17:30 Barbell basics [BOOK] | | +------+ | | | [cal]| 60x60 raised 18px, 4px shadow +=================| |=============+ 2px black top rule | ▬ | 4px orange mark on current | [home] [coach] +------+ [tag] [pin] | bar 64px, 5 equal columns | HOME COACHES BOOK PRICES VISIT | 11px condensed caps +--------------------------------------+ bottom: --chrome-bottom | browser toolbar (not drawn here) | +--------------------------------------+ ``` - `
` is the whole site: header, hero, and four `
`s with ids `book`, `classes`, `prices`, `visit`. The header has id `home`. - The page has bottom padding of `bar 64 + lift 18 + chrome 84 + 24px`, so the last line is never under the bar. - `