Fixed Navigation Bar
A fixed-position (or "sticky") top navigation bar. Scroll this page to see the top navigation bar stay in place.
Read the tutorial View Source on GitHubA fixed-position (or "sticky") top navigation bar. Scroll this page to see the top navigation bar stay in place.
Read the tutorial View Source on GitHubHere are links (with excerpts) to five Six Revisions articles that talk about website navigation. (Because filler content/lorem ipsum sucks.)
Site navigation has a wide variety of common and familiar design patterns that can be used as a foundation for building effective information architecture for a website. This guide covers popular site navigation design patterns. For each site navigation design pattern, we discuss its common characteristics, its drawbacks, and when best to use it.
One of the many beautiful things about web design is the near-limitless options available to us. Yet, still, our navigation systems seem stuck into the existing preformed solutions. For small, personal sites, a simple top horizontal navigation bar is the typical option.
Having clearly labeled navigation types to choose from can help people organize the information more easily. For us professionals, having standardized nomenclature allow us to discuss and explore the subject. Even information architecture (IA) experts like Lou Rosenfeld, Steve Krug, Jesse James Garrett, and Jakob Nielsen don't agree as to what "secondary navigation" is.
There are plenty of techniques for implementing responsive navigation menus on your site. This article talks about eight excellent open source projects for building responsive navigation menus. At the end of the article, you will find a summary table that has links to the official site, demos, usage guide, and official open source repository for each project.
Without a clear understanding of how information architecture (IA) works, we can end up creating sites that are more confusing than they need to be or, worse, make our content virtually inaccessible. This guide covers the fundamentals of information architecture for organizing website content. We will look into popular IA design patterns, best practices, design techniques, and case examples.