Home/Lovable (Vibe Coding) Tutorials/Build a Responsive Navbar with Lovable
Lovable (Vibe Coding) TutorialBeginner45 min read

Build a Responsive Navbar with Lovable

Build a reusable responsive navbar with desktop links, active states, a mobile drawer, sticky styling, and accessible keyboard behavior.

Tutorial ForgeUpdated Aug 25, 2026
Build a Responsive Navbar with Lovable
In this tutorial, you'll use Lovable to build **Northwind**, a small multi-page website centered around a polished, reusable navigation bar.
The finished navigation will include desktop links, a mobile drawer, shared navigation data, active-page indicators, sticky styling, placeholder account controls, and accessible keyboard behavior.
This project does not require Lovable Cloud, a database, or real authentication.

Before You Begin

You'll need a Lovable account, a modern browser, and about 45 minutes. Build and test one navigation layer at a time.
Why Build the Pages First?

Active navigation cannot be tested properly when every link points to the homepage. Northwind uses separate placeholder pages so every route can be verified.

Part 1 — Create the Site and Desktop Navbar

Step 1 — Create a New Lovable Project

Create a new Lovable project named **Northwind Navigation**. Wait for the workspace to open.

Step 2 — Build the Pages and Desktop Navigation

Copy this prompt into Lovable.
Build the Northwind Desktop Navbar
Build a clean, professional multi-page website named Northwind that demonstrates a reusable responsive navigation bar. Create Home at `/`, Features at `/features`, Pricing at `/pricing`, About at `/about`, FAQ at `/faq`, and Contact at `/contact`. Add a shared header to every page with a Northwind brand and square “N” mark on the left, centered desktop navigation links, and Sign In, Create Account, and Get Started controls on the right. Use balanced spacing inside a centered maximum-width container, clean neutral styling, strong readability, subtle borders, rounded controls, and restrained transitions. Make the brand link to Home. Give every page a unique heading and short description. On Home, use the heading “A responsive navbar, ready to extend” with buttons linking to Features and Pricing. Keep the navbar reusable and separate from page content. Do not add a database, Lovable Cloud, or real authentication.
Creates the routes and first desktop version of the navbar.
Wait for Lovable to finish.

Step 3 — Test Every Desktop Link

Select every navigation link. Confirm that each route loads, the brand returns Home, Back and Forward work, a refreshed route remains open, and the navbar stays consistent.
In Part 2, you'll centralize the links and add active-page indicators.

Part 2 — Add Shared Navigation Data and Active States

Step 4 — Centralize the Navigation Configuration

Add Shared Navigation Configuration
Refactor the Northwind navigation so the brand and primary links come from one shared configuration. Include Home to `/`, Features to `/features`, Pricing to `/pricing`, About to `/about`, FAQ to `/faq`, and Contact to `/contact`. Make both desktop and future mobile navigation consume this same configuration. Do not duplicate the link list inside separate components. Preserve the current appearance, routes, content, and buttons.
Keeps desktop and mobile navigation synchronized.
Wait for Lovable to finish, then verify the requested change before continuing.

Step 5 — Add Active-Page Styling

Add Accessible Active Navigation States
Add active-page behavior to Northwind. Detect the current route with the existing router. Give the active desktop link a clear underline, readable active text, and `aria-current="page"`. Do not rely on color alone. Home must be active only on `/`; other links should remain active on their route and nested routes beneath it. Keep hover and keyboard-focus states visible. Preserve every route and the existing layout.
Clearly identifies the current page.
Visit every route and confirm that exactly one desktop link is active at a time.
In Part 3, you'll create the mobile menu and slide-out drawer.

Part 3 — Build the Mobile Navigation Drawer

On smaller screens, the desktop links and account controls will be replaced by a compact menu button.

Step 6 — Add the Mobile Menu

Build the Responsive Mobile Navigation
Add responsive mobile navigation to Northwind. Below the desktop breakpoint, hide the desktop links and account controls, keep the brand visible, and show a clearly labeled menu button on the right. Use a menu icon when closed and close icon when open. Open a drawer from the right with a visible Menu heading. Render all primary links from the shared configuration and show Sign In, Create Account, and Get Started at the bottom. Use touch targets of approximately 44 by 44 pixels. Close after navigation, Escape, or backdrop selection. Trap focus while open, return focus to the menu button after closing, lock background scrolling, and prevent horizontal overflow. Highlight the active mobile route with a subtle background and left indicator while preserving `aria-current="page"`. Connect the button and drawer with accessible labels and `aria-controls`. Preserve desktop behavior and all routes.
Adds an accessible right-side mobile drawer.
Wait for Lovable to finish, then verify the requested change before continuing.

Step 7 — Test the Mobile Drawer

Switch Lovable's preview to mobile. Confirm that the desktop links disappear, the drawer opens from the right, every link navigates and closes it, Escape and backdrop selection close it, focus stays inside while open, focus returns afterward, and the background does not scroll.
Do Not Build Two Separate Link Lists

Desktop and mobile may use different layouts, but both must read from the same shared configuration.

In Part 4, you'll add sticky styling and reusable account-ready controls.

Part 4 — Add Sticky Styling and Reusable Controls

Step 8 — Add the Sticky Scroll Effect

Add Sticky Translucent Navbar Styling
Polish the Northwind header with a restrained sticky scroll effect. Keep it at the top using sticky positioning. At the top of the page, use the current solid background with a transparent border. After scrolling a few pixels, add a subtle bottom border, translucent background, and backdrop blur. Use a short smooth transition, keep controls readable, and use a high enough stacking level so content cannot cover the navbar. Add and remove the scroll listener safely. Preserve all routes and responsive behavior.
Adds the subtle border and blur shown in the preview.
Wait for Lovable to finish, then verify the requested change before continuing.

Step 9 — Keep Account Controls Ready to Connect

Make the Navbar Account-Aware Without Adding Authentication
Keep Northwind signed out by default, showing Sign In and Create Account on desktop and in the mobile drawer. Structure the reusable navbar so it can later accept an optional signed-in user and sign-out action. A future signed-in state should be able to show an avatar menu with the user's name or email, Dashboard, and Sign Out. Do not enable Lovable Cloud, add a database, or create real authentication pages. Keep Get Started configurable and preserve current responsive and accessibility behavior.
Makes the navbar reusable without adding authentication.
Wait for Lovable to finish, then verify the requested change before continuing.

Step 10 — Test the Sticky Header

Scroll on desktop and mobile. Confirm that the header stays at the top, the border and blur appear, the height does not jump, content remains readable, and the mobile drawer still works.
In Part 5, you'll complete the final tests and publish Northwind.

Part 5 — Final Testing and Publishing

Step 11 — Run the Final Test Checklist

Test desktop, tablet, and mobile widths. Verify all routes, active indicators, sticky styling, mobile controls, drawer closing behavior, touch targets, visible keyboard focus, focus trapping and restoration, `aria-current`, and the absence of horizontal overflow.

Step 12 — Fix Only Verified Problems

Use this prompt only if a checklist item fails.
Final Navbar Quality Check
Review Northwind and fix only confirmed failures. Verify that all routes and active states work; desktop and mobile use one shared configuration; controls switch at the correct breakpoint; the drawer closes on navigation, Escape, and backdrop selection; focus stays inside while open and returns afterward; background scrolling is locked; sticky border and blur appear after scrolling; focus indicators and `aria-current` remain present; and no horizontal overflow appears. Preserve the current design, content, routes, responsive behavior, and database-free architecture. Do not add new features.
Repairs verified problems without expanding the project.
Wait for Lovable to finish, then verify the requested change before continuing.

Step 13 — Publish Northwind

Publish through Lovable. Open the public URL in a new tab, test at least three routes, test the mobile drawer, refresh a non-home route, and confirm the published version matches the preview.
Project Complete

You built a reusable responsive navbar with synchronized links, route-aware active states, a sticky translucent header, account-ready controls, and an accessible mobile drawer.

Optional Next Improvement

The component can later support grouped links and desktop dropdowns. Keep the flat menu until a real project has enough related pages to justify grouping them.