Mobile Shell
A full-height mobile frame — a pinned header with a centered single-line title, a natively-scrolling content area, and a bottom MobileNav. Tapping the active tab scrolls back to the top. Modal surfaces use the Drawer component. Render it below the md breakpoint (via useIsMobile()) as the counterpart to the desktop sidebar layout. Shown here inside a device frame.
home
A
Home item 1Scroll the content — the header and nav stay pinned.
B
Home item 2Scroll the content — the header and nav stay pinned.
C
Home item 3Scroll the content — the header and nav stay pinned.
D
Home item 4Scroll the content — the header and nav stay pinned.
E
Home item 5Scroll the content — the header and nav stay pinned.
F
Home item 6Scroll the content — the header and nav stay pinned.
G
Home item 7Scroll the content — the header and nav stay pinned.
H
Home item 8Scroll the content — the header and nav stay pinned.
I
Home item 9Scroll the content — the header and nav stay pinned.
J
Home item 10Scroll the content — the header and nav stay pinned.
K
Home item 11Scroll the content — the header and nav stay pinned.
L
Home item 12Scroll the content — the header and nav stay pinned.
M
Home item 13Scroll the content — the header and nav stay pinned.
N
Home item 14Scroll the content — the header and nav stay pinned.