Navigation And Search
Tab Bars
The bottom row of top-level destinations — sized by the one real "toolbar" token found in /ig.
Findings
What's actually in /ig
- --revamp-nav-bottom-toolbar-height is referenced repeatedly inside calc() expressions for safe-area and scroll-offset math across the production bundle — strong evidence of a real, currently-shipping bottom tab bar ('revamp' suggesting a relatively recent redesign).
Usage
When to use it
Use when
Use for top-level destination switching in mobile layout; the bottom nav stays persistent while content scrolls behind reserved safe-area space.
Avoid when
Avoid for in-page peer panels or short carousels; use Tab Views for panels and Page Controls for manual media position.
Anatomy
Anatomy
- 01
Tab bar container (height: var(--revamp-nav-bottom-toolbar-height))
- 02
Destination icon
- 03
Current-page indicator
- 04
Badge/count
Specification
Spacing, colour, type, and motion
- Height
- var(--revamp-nav-bottom-toolbar-height)
- Icons
- 24px destination icons
- Active tab
- Uses the filled version of the icon, with optional label emphasis
- Safe area
- Other surfaces reserve space with calc() against the toolbar-height token
- Badge
- Notification dot or count attaches to the icon, not the container
States
States
| State | Behaviour |
|---|---|
| Default | Destination rests in the bottom bar with an outline icon and normal label treatment. |
| Pressed | Tap target applies a pressed overlay while navigation resolves. |
| Active | The current destination uses the filled icon and active label treatment. |
| Notification dot | A dot or count sits on the icon to signal pending activity. |
| Disabled | Unavailable destinations reduce opacity and do not navigate. |
Examples
Real interface compositions
App shell
Mobile primary navigation
Home, Search, Reels, Activity, and Profile reserve bottom safe-area space with the same toolbar-height token used by scroll math throughout the production bundle.
--revamp-nav-bottom-toolbar-height, safe-area calc(), current-page indicator
Guidance
Usage guidance
- Reserve layout space for the tab bar using the same token other surfaces calc() against it with — that's the evidenced integration pattern, not a fixed pixel guess.
Do / Don't
Do / Don't
Do
- Use --revamp-nav-bottom-toolbar-height for safe-area math, exactly as the rest of the app does.
Don’t
- Hard-code a pixel height for the tab bar when a token already exists for it.