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.
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