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.

Know first

Navbar Sticky

Content areaSet readable width according to content and screen

You can say this to an AI Agent

Use a top-navigation layout for the content site: put brand, five primary destinations, and search in the top bar, constrain article width, and collect secondary entries on mobile. Verify current-page state, long titles, and sticky offset.

When to use it

Marketing site
◆ logoProduct · Docs · PricingFree trial
Product with a few main sections
max-width: 1120px · margin: 0 auto
Content that needs full page width
Top bar · position: sticky
Simple cross-page navigation
Create project

When NOT to use it

Squeeze many deep sections into one row
HomeProductApproachDocsBlogPricingAboutCareersEvents
Hide the active destination
Let navigation wrap into an accidental second line
DashboardProjectsTasksFilesMembersCalendarReportsMessagesSettingsTrash
Copy the desktop row unchanged onto a phone
Top bar and body share the same background colorLacks visual layering

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

◆ Late-Night Frontend HomepageColumnWeeklyAbout

How I used AI to build a website in one week

Frontend notes · Yesterday · 8 minutes to read

Five CSS Grid layouts you’ll use again and again

Tutorial · 3 days ago · Read in 12 minutes

SaaS product

▲ Yunxie Flow ProductsSolutionsPricingDocuments

Make team collaboration as easy as chat

Tasks, documents, and schedules in one place, get started in 5 minutes

Portfolio

▮ DevDocs GuidelinesAPIExamplesCommunity

Quick start

npm install vibekit

Simple dashboard

● Innovation Conference AgendaGuestsPrevious ReviewFAQ

2026 Summer Session · August 15 · Shanghai

Designer’s AI Workflow Conference

12 practical sharing sessions a day, early bird tickets are limited to 500

Recommended tool

Web fine-tuning tool · Selector Pro

Select page elements for precise AI edits

Click a button, text, or card, note the change, then copy its exact location to AI.

Open Selector Pro website

A content site has five top-level destinations—Home, Articles, Topics, About, and Search—with no deep hierarchy. Which page structure is direct?

A. Use a top-navigation layout, constrain reading width, and collect secondary entries on mobileB. Use a wide permanent sidebar for the five entries and leave the remaining width to articlesC. Remove page navigation and append Articles, Topics, and About into one long homepage