How to create a vertical navigation menu in HTML? (Sidebar UI)
The vertical navigation menu should use a semantic
Vertical navigation menus are straightforward to build with plain HTML and CSS — no frameworks needed. The key is using a <nav></nav> container with a list-based structure and applying flexbox or simple block layout for vertical stacking.
Use semantic <nav></nav> <ul></ul> for accessibility and structure
Screen readers and SEO benefit from proper semantics. Avoid Common mistake: skipping the list entirely and styling The default Flexbox gives you clean spacing, alignment, and hover/focus consistency. Avoid Most sidebar menus collapse into a hamburger on small screens. Use media queries — not JavaScript — for initial toggle behavior unless you need animated transitions. Key detail: hiding with Users need to know where they are — both visually and for screen readers. Relying only on The safest pattern is adding an Width, z-index, and fixed positioning are common next steps — but they're layout concerns, not menu fundamentals. Get the semantics, focus handling, and basic vertical flow right first. Everything else builds on that.<ul></ul> inside <nav></nav> . Each link should be an <a></a> inside an <li> .<a></a> tags as blocks without wrapping them. That breaks keyboard navigation order and ARIA expectations.
<li> Always use
<li> Avoid inline styles — keep layout logic in CSS
<li> Add role="navigation" only if the <nav></nav> isn't already recognized (rare in modern browsers)
Apply vertical layout with
flex-direction: column or display: block
<ul></ul> behavior is vertical, but explicit control avoids surprises — especially when overriding resets or using utility-first CSS.float or inline-block ; they're outdated for this use case. nav ul {
list-style: none;
padding: 0;
margin: 0;
}
navulli {
width: 100%;
}
nav ul li a {
display: block;
padding: 12px 16px;
text-decoration: none;
color: #333;
border-left: 3px solid transparent;
}
nav ul li a:hover,
nav ul li a:focus {
background-color: #f5f5f5;
border-left-color: #007bff;
}
Make it responsive: hide on mobile, show on desktop (or vice versa)
display: none removes the element from tab order. If you want keyboard-accessible toggling, use visibility: hidden height: 0 overflow: hidden , or manage aria-expanded and aria-hidden manually.
<li> Desktop-first:
@media (max-width: 768px) { nav { display: none; } }
<li> Mobile-first: start with nav { display: none; } , then @media (min-width: 769px) { nav { display: block; } }
<li> Don't forget tabindex on toggle buttons if you add JS-based open/close
Handle active state and focus visibility reliably
:hover fails for keyboard and touch users.aria-current="page" attribute to the current link, and styling it with [aria-current="page"] . Don't depend solely on class names like active unless your backend or router sets them consistently. nav ul li a[aria-current="page"] {
background-color: #007bff;
color: white;
border-left-color: #0056b3;
}
/* Always include focus style */
nav ul li a:focus {
outline: 2px solid #007bff;
outline-offset: 2px;
}
The above is the detailed content of How to create a vertical navigation menu in HTML? (Sidebar UI). For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undresser.AI Undress
AI-powered app for creating realistic nude photos
ArtGPT
AI image generator for creative art from text prompts.
Stock Market GPT
AI powered investment research for smarter decisions
Hot Article
Popular tool
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
20518
7
13631
4
What is Destructuring in JavaScript? (Working with Objects and Arrays)
Mar 07, 2026 am 12:38 AM
Destructuring assignment is a shortcut for variable declaration. Its essence is to expand the object or array structure to read the existing value, not a deep copy. It needs to prevent null/undefined errors, nesting breaks, empty array slots, renaming syntax errors and function parameter default value traps.
How to create a 3D flip card effect using CSS transforms?
Mar 11, 2026 am 12:07 AM
transform-style:preserve-3disrequiredtoretain3Ddepthforchildelements;withoutit,facesflatteninto2Dandthebackfacedisappearsdespitebackface-visibility:hidden.
How to Implement Authentication with JavaScript? (Using JWT - JSON Web Tokens)
Mar 08, 2026 am 01:04 AM
JWTexp should be set to a reasonable length according to the business. The front end must use server exp to verify expiration to avoid misjudgment of local time. Use atob() for parsing to process Base64Url encoding. RefreshToken needs to prevent concurrency, set expiration and store httpOnlyCookie. Signature verification must be left to the back end.
How to Make Your JavaScript Code More Readable? (ESLint and Prettier)
Mar 13, 2026 am 12:01 AM
ESLint is responsible for logical verification, and Prettier is responsible for format unification; it is necessary to disable the format rules in ESLint and correctly configure the Prettier configuration file and VSCode settings to avoid conflicts and repeated formatting.
How to improve website accessibility with HTML? (ARIA Roles)
Mar 09, 2026 am 12:18 AM
The scenario where role must be used is when the function cannot be implemented using semantic HTML, such as custom combobox; aria-live="polite" is used for non-emergency prompts, and "assertive" is only used for emergency interruption; role="dialog" needs to be combined with aria-modal, aria-labelledby and focus management to be effective.
How to embed a Google Map into your HTML page? (Location Services)
Mar 06, 2026 am 01:08 AM
The easiest way to embed a map is to use an iframe. You need to delete the width/height attributes and use CSS to control the responsiveness. Set the zoom level to 14 to 16, enable MapsEmbedAPI and configure the APIKey. Prioritize iframe for static display, and use JavaScriptAPI for dynamic interaction. Pay attention to domain name whitelist, HTTPS, GDPR compliance and delayed loading.
How to customize scrollbars in WebKit browsers with CSS?
Mar 12, 2026 am 12:43 AM
Custom scroll bars in WebKit must declare ::-webkit-scrollbar, ::-webkit-scrollbar-track and ::-webkit-scrollbar-thumb at the same time, each of which is indispensable; setting only some pseudo-elements will cause the rest to fall back to the default style, and it should be noted that Safari mobile terminal almost does not support style customization.
How to Optimize JavaScript Performance for Your Website? (Debugging and Best Practices)
Mar 09, 2026 am 01:00 AM
Console.log cannot be used as a performance analysis tool because of the high overhead of serialization, UI updates and cross-process communication; console.time/timeEnd, breakpoint watch or build tool stripping should be used instead; reading layout properties will force synchronous reflow; debounce/throttle needs to be selected according to the scenario; awaited and resolved Promise still has microtask scheduling overhead.
