Top Navigation

The top navigation bar is the blue header bar that appears at the top of every page on your website. It contains links that help visitors navigate your site.

How It Works

The top navigation bar is driven by a Menu entity. You create a menu with the links you want (see Menus and Navigation), then select that menu in the navigation settings. The menu's items become the links in the top navigation bar.

Configuring the Top Navigation

1. Make sure you have already created a menu with the items you want to appear in the top nav. If you have not, go to /dashboard/admin/menus and create one first.
2. Navigate to /dashboard/admin/settings/navigation/.
3. Use the dropdown to select which menu should drive the top navigation bar. Only active menus are shown in the list.
4. Click Save.
5. Refresh the page to see your changes take effect.

Setting to None

If you select None from the dropdown, the top navigation bar will appear without any links. The header logo (or organization name) will still be displayed, but there will be no navigation items.

What Appears in the Top Nav

The top navigation bar shows the items from the selected menu:

• Items are displayed in the order you configured (by their Order value).
• Highlighted items appear with a visually distinct style, making them stand out from regular links. Use this for calls to action like "Join Us" or "Register."
• Items set to Open in New Tab will open in a new browser tab when clicked.
• Inactive items are hidden and do not appear in the navigation.
• Dividers (the "Divider After" option on menu items) add visual separation between groups of links.
• Child items (nested under a parent) may appear as dropdown menus.

Tips for an Effective Top Navigation

• Keep it concise. Aim for 5 to 7 top-level items. Too many links make the navigation harder to scan.
• Put the most important links first. Visitors tend to look at the first few items.
• Use highlight for your primary call to action. If you want visitors to sign up or register, highlight that link so it stands out.
• Use dropdowns sparingly. One or two parent items with children can help organize links, but deeply nested menus are harder to use on mobile devices.
• Test on mobile. The navigation bar adapts to smaller screens. Make sure your most important links are easy to reach on phones and tablets.