WeWeb Navigation: Custom Menus, Headers, and Footers

In the left panel, click the Add element icon (+) → scroll to Navigation → drag Top Navigation Bar onto your canvas. The component renders immediately with default placeholder links. Select the component to see its Settings panel on the right. The Settings panel exposes: Logo (image or text), Navigation links (list of label + page/URL pairs), CTA button (optional right-side action), and Mobile breakpoint threshold (the pixel width at which the hamburger menu replaces the full nav). Click any navigation link in the Settings panel to edit its label and destination. Click the + icon to add new links. Links can point to WeWeb pages (select from dropdown) or external URLs. The Top Navigation Bar automatically collapses to a hamburger menu at Mobile breakpoint — no workflow needed for this basic behavior. Style the nav by selecting it and using the Styling panel: background color, padding, border-bottom, sticky positioning (set position to 'sticky', top to 0, z-index to 100).

The Top Navigation Bar component placed on one page only appears on that page. To share a header across multiple pages, use WeWeb's multi-page sections feature. First, design your header section on the page where you want to start. This can be the Top Navigation Bar component inside a Section, or any custom header layout you build. Once your header looks correct, select the Section that wraps the header content (in the left Navigator panel, find the topmost Section). Right-click the Section → 'Turn into linked section' (or from the top right context menu, look for 'Linked section'). A dialog appears asking which pages should display this section. Check all the pages you want. The section now appears at the top of every selected page, and any change you make to it on one page updates it everywhere. To add or remove pages from the shared section later: select the linked section → Settings panel → 'Manage pages'. Footers work identically — create a section at the bottom, link it across pages.

Active link highlighting — where the current page's nav item visually differs from others — requires a binding formula. For each navigation link element, go to Styling panel → create a CSS class (e.g., 'nav-link'). Then add a subclass for the active state. The simplest approach uses a binding: select the navigation link → Styling panel → bind the color or border-bottom property → use the formula: `if(wwContext.pageId === 'YOUR_PAGE_ID', '#active-color', '#default-color')`. You can find each page's ID in the page URL in the WeWeb editor. A cleaner approach: bind a CSS class to the nav item using the formula. Create two classes — 'nav-link' and 'nav-link-active'. Then in the Settings panel → bind the element's class list to: `['nav-link', wwContext.pageId === 'YOUR_PAGE_ID' ? 'nav-link-active' : '']`. Repeat for each nav link with its corresponding page ID.

1/* Injection point: Styling panel → CSS Classes → nav-link-active class definition */
2
3/* Base nav link style */
4.nav-link {
5  color: #374151;
6  font-weight: 500;
7  padding: 8px 12px;
8  border-radius: 6px;
9  text-decoration: none;
10  transition: background-color 0.15s ease;
11}
12
13/* Active page indicator */
14.nav-link-active {
15  color: #6366f1;
16  background-color: #eff0ff;
17  font-weight: 600;
18}
19
20/* Hover state on non-active links */
21.nav-link:not(.nav-link-active):hover {
22  background-color: #f3f4f6;
23}

If you are using the built-in Top Navigation Bar, the hamburger menu is already included. For a custom navigation layout: first, create two elements — a desktop navigation container (visible on Desktop and Tablet, hidden on Mobile) and a mobile hamburger icon element (hidden on Desktop and Tablet, visible on Mobile). At Mobile breakpoint in the Styling panel, set the desktop nav's display to 'none' and the hamburger icon's display to 'flex'. Second, create a mobile menu panel — a full-width container positioned below the nav with your mobile links. Set this container's display to 'none' by default. Third, create a Boolean variable: Data panel → Variables → New → Boolean → name it 'mobileMenuOpen' → default value false. Fourth, bind the mobile menu container's display property to: `if(mobileMenuOpen, 'flex', 'none')`. Fifth, add a workflow to the hamburger icon: Workflows → On click → Action: Change variable value → mobileMenuOpen → Toggle (or set to true). Add a second workflow to each mobile link: On click → Change variable value → mobileMenuOpen → set to false (to close the menu after navigation).

Frontend role-based menu visibility is a UX feature, not a security measure. A user with the wrong role can still access a page if they know the URL — true access control requires page-level access restrictions (Page settings → Access control, Scale plan required) AND backend RLS policies. With that caveat stated: to hide menu items for specific roles, use Conditional Rendering. Select the nav link element you want to restrict → Settings panel → Conditional Rendering → click the plug icon → write a formula referencing the current user's roles. With Supabase Auth: the formula is `wwContext.user.roles.includes('admin')` or `wwContext.user.roles.some(r => r.role_id === 'admin-role-id')`. With Auth0: roles are typically available at `wwContext.user['https://your-app.com/roles']`. Wrap multiple restricted items in a container and apply Conditional Rendering at the container level to keep your formula in one place.

For menus whose items come from a database (e.g., a CMS navigation, product categories, or dynamically generated page sections): create a collection in the Data panel → + New → choose your data source (Supabase, REST API, etc.) → configure to fetch navigation items (e.g., a 'navigation_items' table with label and url columns). Now build your menu: add a Flexbox Container inside your header. Select the container → Settings panel → Repeat items → click the plug icon → bind to your navigation collection's data array. The first child element of the container becomes the template repeated for each item. Inside the template child, add a Text element and bind its text property to `item.label`. Add a workflow on click: Navigate → bind the URL to `item.url`. Add active-state styling using `if(item.url === window.location.pathname, 'nav-link-active', 'nav-link')` as the class binding. Change collection to update the nav without touching WeWeb.

For dashboard or app-style layouts, the Side Menu component provides a vertical navigation panel. In the Add element (+) panel → Navigation → Side Menu. The Side Menu is typically placed inside a layout that has the sidebar on the left and main content on the right. Create a Flexbox Container with flex-direction 'row'. Place the Side Menu inside the left child. Place your main content container inside the right child with Flex → Grow: 1 so it fills remaining space. In the Side Menu's Settings panel, configure navigation items the same way as the Top Navigation Bar — label and page destination pairs. At Mobile breakpoint, you will typically want to either hide the side menu entirely (set display to 'none') and show a bottom navigation or hamburger instead, or configure the side menu as an off-canvas drawer. The Side Menu component supports a collapsed/expanded state that can be toggled via a workflow: Add a workflow on click → Execute component action → Side Menu → Toggle.