Tech does not just watch: Take action against Russia’s war on Ukraine 🇺🇦, and take action against Israel’s occupation, destruction, and ethnic cleansing of Palestine (history) 🇵🇸 Hide

Frontend Dogma

“navigation” News Archive

Definition, related topics, and tag feed

Definition · Supertopics: information-architecture, design-patterns · Subtopics: breadcrumbs, sitemaps (non-exhaustive) · “navigation” RSS feed (per email)

Entry (Sources) and Other Related TopicsDate#
NoLoJS: Reducing the JS Workload With HTML and CSS (aar)110
html, disclosure-widgets, forms, modals, pop-overs, scrolling, positioning
A New Navigation Paradigm109
ai, design
Testing Methods: Multiple Ways (dec)108
accessibility, wcag, testing, sitemaps, link-lists
Is It Time to Kill the Sidebar? (web)107
design, minimalism
Make Navigation Accessible With “aria-current” (a11)106
accessibility, aria, attributes
Why Sticky Navigation Can Undermine Accessibility105
accessibility
CSS “offset“ and “animation-composition” for Rotating Menus (pre/fro)104
css, animations
How Blind People Navigate the World, On- and Offline (lau)103
accessibility, screen-readers, nvda, jaws
Category and Tag Pages With Eleventy102
eleventy, pagination
20 Footer Design Myths You’re Still Believing (and How to Fix Them (web)101
design, myths
The Hidden Cost of Poor Navigation: How Information Architecture Directly Impacts Business Metrics (uxm)100
information-architecture, economics
Slightly Enhanced Sticky Revealing Footer (cri)99
css, javascript
The Hamburger-Menu Icon Today: Is It Recognizable? (nng)98
icons, design, usability
Creating the “Moving Highlight” Navigation Bar With JavaScript and CSS (sma)97
effects, javascript, css
Sticky Revealing Footer (bel/pic)96
css, positioning
Menu and Navigation: The Difference (stv)95
pagination, html, aria, accessibility
Top 5 CSS Navigation Menu Mistakes (zor/css)94
css, mistakes, usability
Using ARIA Landmarks for Better Navigation93
keyboard-navigation, aria, accessibility
How Navigation Should Work for Keyboard Users (tem)92
keyboard-navigation, focus, accessibility
Breadcrumbs Are Dead in Web Design (web)91
design-patterns, breadcrumbs
There’s No Such Thing as “Menubar Navigation” (tem)90
accessibility, html
10 Common Web Development Mistakes to Avoid Right Now89
mistakes, mobile, performance, accessibility, seo, security, analytics, testing
12 Web Accessibility Tips to Make Your Site More User-Friendly88
accessibility, tips-and-tricks, contrast, alt-text, keyboard-navigation, captions, labels, skip-links, microcontent
Designing Accessible Website Navigation: Best Practices for Inclusive UX87
accessibility, design, user-experience
How to Set Up an Accessible Page Structure and Navigation (pop)86
how-tos, accessibility, html
How Effective UX Design Can Boost Business Success (uxm)85
user-experience, design, economics, user-conversion, mobile, performance
Tabs, Used Right (nng)84
design, design-patterns, usability
Information Scent: How Users Decide Where to Click83
information-scent, links, usability
Building a Responsive Menu With CSS (and No JavaScript) (cor)82
responsive-design, css
Creating a Navbar in React81
react, css
How to Create a Sidebar Navigation With Astro, Tailwind CSS, and Alpine.js80
how-tos, functionality, astro, tailwind, alpinejs
Navbar Gallery79
websites, design-patterns, examples
LCP and FCP on Single Page Application on Soft Navigations (dws)78
performance, web-vitals, single-page-apps
Design Better Pagination77
design, pagination
Table of Contents: The Ultimate Design Guide (nng)76
guides, design, usability
An Anchored Navbar Solution (mey)75
html, css
In-Page Links for Content Navigation (nng)74
links, usability
Experimenting With Measuring Soft Navigations (tun/dev)73
performance, web-vitals, experiments, metrics
Information Architecture vs. Sitemaps: What’s the Difference? (nng)72
information-architecture, sitemaps, comparisons
Hover Triangles (may)71
history
Accessible Navigation70
accessibility
90s Websites—Key Characteristics and Examples69
design, history, trends, colors, typography
The Problem With Sticky Menus That Appear on Scroll and What to Do Instead (ada)68
scrolling, user-experience
Accessible Components: The Hamburger Menu67
accessibility, components
The Problem With Sticky Menus and What to Do Instead (ada)66
usability, user-experience
How to Make a CSS-Only Hamburger Menu65
how-tos, css
A Designers Guide to the Principles of Web Design64
guides, design, principles, consistency, legibility, images, hierarchy, whitespace, usability
Building Pagination in React With React Paginate63
react, pagination
How to Build Accessible Main Navigation? (iod)62
how-tos, accessibility
Accessible Hamburger Buttons Without JavaScript61
accessibility, javascript
Unordered Lists in Main Navigations (mat)60
html, lists, semantics
Designing the Perfect Mobile Navigation UX (vit/sma)59
mobile, user-experience
Audience-Based Website Navigation (nng)58
videos, usability
Building the Main Navigation for a Website (mat/dev)57
html, css
Creating a CSS Only Interactive Site Menu56
css
Why Do We Call It “Breadcrumbs”? Diving Into the History of UI Components (uxm)55
design, naming, history, breadcrumbs
Hamburger Footer: Reaching the Bottom of Infinite Scroll54
scrolling, usability
Four Tradeoffs When Designing Navigation Menus53
design
Designing Better Breadcrumbs (vit/sma)52
html, usability, breadcrumbs
Designing a Better Infinite Scroll (vit/sma)51
scrolling, pagination
Alternatives to Pagination on Product-Listing Pages (nng)50
design-patterns, usability, pagination
The Importance of Screen Reader Software for Web Navigation49
accessibility, screen-readers
A Clever Sticky Footer Technique (chr/css)48
css, layout
Using CSS Shapes for Interesting User Controls and Navigation (pre/css)47
css, shapes
The Anatomy of a Web Page: 14 Basic Elements46
design-patterns, buttons, forms, multimedia, favicons, images, link-lists
How Apple Changed the Way We Navigate—Forever (uxd)45
design, apple
9 Principles of Good Web Design44
design, principles, simplicity, content, layout, performance, mobile
Sticky Headers: 5 Ways to Make Them Better (nng)43
design, optimization
How to Use CSS Grid for Sticky Headers and Footers (ada/css)42
css, grids, layout
Three CSS Alternatives to JavaScript Navigation (css)41
css
Information and Information Architecture: The Big Picture (sma)40
information-architecture, content, user-experience
Footers Are Underrated39
videos, usability
The 3-Click Rule for Navigation Is False (nng)38
usability
The Elements of UI Engineering (dan)37
user-experience, consistency, performance, prioritization, accessibility, internationalization, resilience
How Do You Know Your Website Is a Success? (sma)36
product-management, strategies, metrics, user-experience, content, microcontent, performance, testing
Building Accessible Menu Systems (hey/sma)35
accessibility, html, aria
A Comprehensive Guide to Web Design (sma)34
guides, design, content, information-architecture, content-strategy, scrolling, forms, accessibility
UX: What Can We Prototype? What Can’t We Prototype?33
user-experience, prototyping, information-architecture, layout
Homepage Links Remain a Necessity (nng)32
homepages, links, breadcrumbs, conventions, usability
Accessible Breadcrumb Navigation Pattern (sco)31
accessibility, breadcrumbs, aria
Mobile First Is Not Mobile Only (nng)30
mobile, usability
Supporting Mobile Navigation in Spite of a Hamburger Menu (nng)29
mobile
Killing Off the Global Navigation: One Trend to Avoid (nng)28
trends
The Curious Case of Breadcrumbs in HTML (j9t)27
html, breadcrumbs
Responsive Navigation on Complex Websites (sma)26
responsive-design, complexity
A Look at the HTML5 “nav” Element25
html, semantics
5 HTML5 and ARIA Design Patterns (tin+)24
html, aria, design-patterns
Off Canvas Menu With CSS “:target” (chr/css)23
css, selectors
Exploration of Single-Page Websites (sma)22
design, landing-pages, examples
5 CSS Properties That Give Designers Fits21
css, design, floats, shadows, gradients, borders
CSS “:target” for Off-Screen Designs (css)20
css, selectors, transitions, mobile
Responsive Navigation Patterns (bra)19
design, responsive-design, design-patterns
Organizing Mobile (ali)18
mobile, content, usability
Web Page Anatomy (jas)17
design-patterns
Website Navigation: Planning and Implementing (vit/sma)16
examples
Exploring Markup for Breadcrumbs (chr/css)15
html, breadcrumbs, semantics
Tips for Web Design That Crosses Cultures (css)14
localization, unicode, colors, seo, design
Informative and Usable Footers in Web Design (sma)13
design, usability, link-lists
Navigation Markup After Content (chr/css)12
html, seo, skip-links
Mega Drop-Down Navigation Menus Work Well (nng)11
usability, simplicity, accessibility
Site Map Usability (nng)10
sitemaps, information-architecture, usability, studies, research
Footers in Web Design: Creative Examples and Ideas (sma)9
examples, design
Command Links (nng)8
links, buttons, usability
Breadcrumb Navigation Increasingly Useful (nng)7
breadcrumbs, design-patterns, usability
CSS Navigation Magnification (dal/aja)6
css
Ten Steps to a More User Friendly Website5
flash, performance, images, compression, link-rot, html, conformance, browsers, support, readability, quality
Spruced-Up Site Maps (ali)4
html, sitemaps
Keeping Navigation Current With PHP (ali)3
php
When Web Pages Don’t Work2
user-experience, performance, graceful-degradation, usability, design, testing
Is Navigation Useful? (nng)1
usability