Top Nav
You might say
Use the classic layout: a navigation bar on top and all the content below it.
Place the main navigation across the top of the pageA top-navigation layout works when a product has a small number of primary sections and needs wide content space below. Keep labels short, show the current section, and decide how the navigation collapses on narrow screens.
When to use it
- Marketing site
- Product with a few main sections
- Content that needs full page width
- Simple cross-page navigationCreate project
When NOT to use it
- Squeeze many deep sections into one row
- Hide the active destination
- Let navigation wrap into an accidental second line
- Copy the desktop row unchanged onto a phone
Anatomy
Content areaFooter · Copyright and secondary links
Holds the brand, navigation, and primary actions; make it sticky when needed
The page’s main content, centered with a maximum width and side whitespace
Holds copyright, regulatory information, and secondary links
Variants
Static
For a short page that does not need persistent navigation
Sticky
When navigation should remain available while users scroll through a long page
Stacked
When the navigation has too many items for a single row
Typical use cases
Company site
SaaS product
Portfolio
Simple dashboard
Further reading