How to use the Navbar Generator
- 1. Add your linksType the brand name, the links separated by commas and an optional button.
- 2. Style itPick colours, alignment and whether it sticks to the top.
- 3. Copy the codeGet HTML, CSS and a few lines of JavaScript, or download a demo page.
How the navbar works
On wide screens the links sit in a row next to the brand. Below 720px, a media query hides the links and shows a ☰ button. Tapping it toggles a class that shows the menu as a column, and updates aria-expanded so screen readers know whether the menu is open. The button also has an aria-label, because a ☰ symbol alone means nothing to a screen reader.
Sticky mode uses position: sticky; top: 0, which keeps the bar visible while scrolling without the jumpy layout that position: fixed can cause.
Worked example
With the defaults (brand MySite, links Home, Courses, About, Contact and an Enrol now button), you get a navbar with 4 links plus the button. Each link points to an anchor made from its text, such as #courses, which you can replace with real URLs. Switch the preview to Phone 375px and tap ☰ to see the menu open.
- Keep links to 5 to 7; more is hard to scan on a phone.
- Use the accent colour for the one action you most want, such as enrolling or contacting.
- Test with the keyboard: Tab should reach the menu button and every link, with a visible focus.
Frequently asked questions
Does it need Bootstrap or jQuery?
No. It is plain HTML, CSS and four lines of JavaScript.
Can I add dropdowns?
Not in this generator. Nested menus need extra HTML and careful keyboard handling.
How do I mark the current page?
Add a class such as active to the current link and style it, along with aria-current="page".
Is the generator free?
Yes, it is free. Getting your first navbar code asks for your name and WhatsApp number once, and after that all Uncodemy tools are open.