App Style Bottom Navigation

What it does

The bottom navigation gives your mobile visitors what apps trained their thumbs to expect: your key sections as tabs along the bottom, your one big action raised in the middle, and a More sheet for everything else. It only appears on phones, where your regular menu is hardest to reach.

• Every tab links to a real page of yours; inventing pages is banned.
• The tab for the page someone's on lights up in your accent color.
• The raised center button carries your single most important action.
• The More sheet slides up with the rest of your sections and closes on a tap outside, Escape, or a pick.
• The page gets padding, so the bar never covers your content.

How it works

1. 01

   Type your tab labels, comma separated, or leave the box empty and your AI picks your site's main sections.

2. 02

   Name the center action, like Join or Order, or leave it blank to build the bar without one.

3. 03

   Pick the center button's shape and what the More sheet looks like.

4. 04

   Copy the prompt, the bar's complete instructions for your AI, into whichever AI you use.

5. 05

   Check it on your phone: real links on every tab, the current page lit up, and nothing hiding behind the bar.

6. 06

   Shrink and grow the window: the bar should exist on phone sizes only, handing back to your normal menu on desktop.

What you can customize

• Tab labels: your own words, comma separated; blank lets your AI choose the 3 or 4 sections that matter most.
• Center action: your one key action's label; blank removes the center button and spaces the tabs evenly.
• Center button shape: raised circle, pill, or rounded square, whichever suits your style.
• More sheet: a grid of little icon cards, a simple list, or none if the tabs cover everything.

For a longer link list, add a slide-out side panel.

On desktop, where the bottom bar doesn't show, keep your links within reach with a header that stays at the top as visitors scroll.