# Mobile — headers, tab bars, sheets, safe areas Source: https://ui.barua.tz/docs/mobile.html Rules and conventions: https://ui.barua.tz/llms.txt ## Mobile Header .b-mobile-header is the sticky glass chrome at the top of a mobile view: a three-column __bar with a .b-back-btn at the start, a centered __title and an __action--end slot. One note on the demos on this page: mobile chrome is normally position: fixed or sticky , so each demo sits inside a phone-width frame and the component gets an inline position: static override to render inside it — drop the override in a real app. - Documentation: https://ui.barua.tz/docs/mobile.html#mobile-header - Classes: `b-back-btn` `b-btn` `b-btn--ghost` `b-icon-btn` `b-mobile-header` `b-mobile-header__action--end` `b-mobile-header__action--start` `b-mobile-header__bar` `b-mobile-header__large-title` `b-mobile-header__title` ```html

``` ```tsx import { BackButton, Button } from "barua-ui";

Inbox

Message

``` ## Mobile Navigation Mobile navigation is a pattern, not one component. Follow the iOS conventions: the back button sits at the start of the header, is labelled with the previous screen's title (never just "Back"), and the current screen's title stays centered. Push deeper views onto a stack; switch top-level sections with the Bottom Tab Bar below. For overflow destinations, use the navigation drawer from the Navigation page, or the Mobile Menu as a full-screen list. - Documentation: https://ui.barua.tz/docs/mobile.html#mobile-navigation ## Bottom Tab Bar .b-bottomnav fixes a glass tab bar to the bottom edge with safe-area padding built in. Use three to five __item s, mark the current one with .is-active , and attach a .b-badge--count to an icon for unread counts. - Documentation: https://ui.barua.tz/docs/mobile.html#bottom-tab-bar - Classes: `b-badge` `b-badge--count` `b-bottomnav` `b-bottomnav__item` ```html