Resize to mobile width
md breakpoint to see the bottom navigation. Tap Explore or More to open upward menus — under Explore, Examples expands into a nested submenu. The More menu includes appearance and theme controls.Activity section 1
Sample scrollable content so you can verify the bottom nav does not cover the last lines when you reach the end of the page.
Mobile shells reserve space at the bottom of the page with safe-area padding. Scroll to the end and confirm this paragraph stays fully visible above the navigation bar.
- Up to four top-level destinations in the bottom bar.
- Nested links expand upward in a menu panel, with support for additional submenu levels.
- Desktop viewports hide the bottom bar and use the compact top header.
Activity section 2
Sample scrollable content so you can verify the bottom nav does not cover the last lines when you reach the end of the page.
Mobile shells reserve space at the bottom of the page with safe-area padding. Scroll to the end and confirm this paragraph stays fully visible above the navigation bar.
- Up to four top-level destinations in the bottom bar.
- Nested links expand upward in a menu panel, with support for additional submenu levels.
- Desktop viewports hide the bottom bar and use the compact top header.
Activity section 3
Sample scrollable content so you can verify the bottom nav does not cover the last lines when you reach the end of the page.
Mobile shells reserve space at the bottom of the page with safe-area padding. Scroll to the end and confirm this paragraph stays fully visible above the navigation bar.
- Up to four top-level destinations in the bottom bar.
- Nested links expand upward in a menu panel, with support for additional submenu levels.
- Desktop viewports hide the bottom bar and use the compact top header.
Activity section 4
Sample scrollable content so you can verify the bottom nav does not cover the last lines when you reach the end of the page.
Mobile shells reserve space at the bottom of the page with safe-area padding. Scroll to the end and confirm this paragraph stays fully visible above the navigation bar.
- Up to four top-level destinations in the bottom bar.
- Nested links expand upward in a menu panel, with support for additional submenu levels.
- Desktop viewports hide the bottom bar and use the compact top header.
Activity section 5
Sample scrollable content so you can verify the bottom nav does not cover the last lines when you reach the end of the page.
Mobile shells reserve space at the bottom of the page with safe-area padding. Scroll to the end and confirm this paragraph stays fully visible above the navigation bar.
- Up to four top-level destinations in the bottom bar.
- Nested links expand upward in a menu panel, with support for additional submenu levels.
- Desktop viewports hide the bottom bar and use the compact top header.
Activity section 6
Sample scrollable content so you can verify the bottom nav does not cover the last lines when you reach the end of the page.
Mobile shells reserve space at the bottom of the page with safe-area padding. Scroll to the end and confirm this paragraph stays fully visible above the navigation bar.
- Up to four top-level destinations in the bottom bar.
- Nested links expand upward in a menu panel, with support for additional submenu levels.
- Desktop viewports hide the bottom bar and use the compact top header.
Activity section 7
Sample scrollable content so you can verify the bottom nav does not cover the last lines when you reach the end of the page.
Mobile shells reserve space at the bottom of the page with safe-area padding. Scroll to the end and confirm this paragraph stays fully visible above the navigation bar.
- Up to four top-level destinations in the bottom bar.
- Nested links expand upward in a menu panel, with support for additional submenu levels.
- Desktop viewports hide the bottom bar and use the compact top header.
Activity section 8
Sample scrollable content so you can verify the bottom nav does not cover the last lines when you reach the end of the page.
Mobile shells reserve space at the bottom of the page with safe-area padding. Scroll to the end and confirm this paragraph stays fully visible above the navigation bar.
- Up to four top-level destinations in the bottom bar.
- Nested links expand upward in a menu panel, with support for additional submenu levels.
- Desktop viewports hide the bottom bar and use the compact top header.
End of page content — this line should remain visible above the mobile bottom navigation.