Navigation
Navigation is the process and structure that enables movement among pages, sections, views, or other destinations in a digital system.
WordPress Power Toolkit: Harness AI to build next-level websites
A WordPress interface element, widget, or block that presents links to site pages and other destinations.
- How it is used
- Guides visitors through a coherent site by exposing main topics, supporting pages, and intended paths.
- How deep it goes
- Explains planning, parent-child hierarchy, concise labels, menu setup, and observation-based refinement without technical implementation internals.
- Examples
- Uses bass-fishing menu research, recipe child-page placeholders, and home/blog page organization in WordPress.
- What you can do after
- Build it from scratch by planning a page hierarchy, creating parent and child pages, and testing a concise menu.
Read how WordPress Power Toolkit: Harness AI to build next-level websites explains navigation →
Build a Website with ChatGPT
A navigation bar is a page component that provides links or controls for moving among pages or sections of a website.
- How it is used
- Guides visitors between pages by collecting important site links in one accessible location.
- How deep it goes
- Defines the component, demonstrates its HTML structure, explains Flexbox styling, and defers menu implementation to another chapter.
- Examples
- Uses Home, Blog, FAQ, About, and Contact links pointing to separate HTML files.
- What you can do after
- Build it from scratch with HTML and CSS or request a customized navigation bar from ChatGPT.
Web Design Playground, Second Edition
A navigation section is a page section containing controls or links for moving among pages or sections of a site.
- How it is used
- Organizes links for moving among the photo gallery’s pages.
- How deep it goes
- Defines the HTML structure and demonstrates Flexbox, current-page, and hover styling without exploring advanced navigation behavior.
- Examples
- Uses four gallery links and highlights Gallery 1 as the current page.
- What you can do after
- Build a gallery navigation section with nav, ul, li, and a elements, then style its layout and states.
Read how Web Design Playground, Second Edition explains navigation →
CSS in Depth, Second Edition
A navigation menu is an interface component containing links for moving among sections or destinations.
- How it is used
- Deploys navigation as a responsive, interactive menu for moving among page destinations.
- How deep it goes
- Builds markup and responsive CSS, then demonstrates transforms and transitions without detailing their complete implementation.
- Examples
- Uses icon-and-label links, a mobile horizontal menu, and a large-viewport menu docked to the left.
- What you can do after
- Build it from scratch as a responsive CSS navigation menu with icons, labels, hover states, and viewport-specific positioning.
Related concepts
- nav elementimplemented by · The HTML nav element represents a section of a document containing navigation links or other navigation-related content.
- hypertext linkhas part · A hypertext link is a reference embedded in digital content that enables navigation to another resource or location.
- flyout navigationincludes · Flyout navigation is a user-interface navigation pattern in which a side menu reveals selectable pages that occupy the main display area.
- home pageused by · A home page is a website’s primary or default introductory page and an entry point to its main content or sections.
- tabincludes · A selectable user-interface item that identifies and switches to a page or a related content view.
- browserused by · A web browser is software that retrieves, interprets, and renders web resources, executes supported web content, and enables interaction with web pages and applications.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.