UINavbar
The bar at the top of a site: brand, main links, a search and the account, collapsing into a button on small screens.
A navbar holds the main navigation of a site. It shows the brand, the places people go most, and the tools of the account, and folds into a menu button when the screen is narrow.
When to use it
Use it
- Five to seven main links, the current one marked.
- The brand on the left, the tools (search, account) on the right.
- Put the less used links inside a dropdown.
- Let it collapse below the breakpoint that fits the number of links.
Don't
- Fill it with every page of the site.
- Use two navbars one above the other.
- Change the order of the links between pages.
Anatomy
A brand (navbar-brand), a toggler for small screens (navbar-toggler), a collapsible area (navbar-collapse) with the links (navbar-nav, nav-link) and optional forms or text (navbar-text).
Variants and states
Moodle’s navigation bar
The bar of Moodle is the one every user knows, and each version draws it its own way: Moodle 5.3 with the pill and the dot of its design system, Moodle 4.x with the underlined link. The bar below is what Moodle renders in the selected version; a plugin does not draw its own.
This Moodle version has no dark mode: examples stay light.
Bootstrap’s navbar
For a screen of a plugin that needs a bar of its own (a standalone tool, a dashboard), Bootstrap’s navbar is the component to start from.
This Moodle version has no dark mode: examples stay light.
This Moodle version has no dark mode: examples stay light.
Search from the bar
The magnifier of a bar is a bold icon, not a text box: a field in the bar has to be narrow and competes with the links. Pressed, the icon opens a search component under the bar: a field with room for a long query, filters by kind, results that say what each one is (a tile, a title, a line of context and a badge), the one selected highlighted, and the keys that drive it. The icon takes the tint of the primary colour while the component is open.
This Moodle version has no dark mode: examples stay light.
Combinations
| Combination | Use it for |
|---|---|
| Brand × links × tools | Brand on the left, the main links next to it, the tools (search, notifications, account) on the right. |
| Links × dropdown | The less used links go inside a dropdown (“More”) so the bar never wraps. |
| Light × primary | A light bar for working screens, a bar in the primary colour for a tool with its own identity. |
| Icons × badges | Tool icons with a counter on the corner (badge-float); the account as initials or a photo. |
What Didactika changes and why
| What we changed | Why it helps |
|---|---|
| Moodle’s bar keeps its design in each version | The user must find the same navigation in every course; the design system documents it, it does not replace it. |
| Links are pills with a tint, the current one is stronger | It is clear where you are from the weight and the tint, not only from the colour. |
| A thin border and rounded corners on the standalone navbar | It separates the bar from the page without a heavy shadow. |
Classes
| Class | What it does |
|---|---|
navbar, navbar-expand-lg |
The bar, and the width from which it expands |
navbar-brand |
Brand |
navbar-nav, nav-link |
The links; active, disabled |
navbar-toggler |
The button that opens the menu on small screens |
navbar-text |
Plain text inside the bar |
nav-search-toggle |
The bold magnifier of a bar (Didactika) |
dd-search, dd-search-field, dd-search-filters, dd-search-results, dd-search-foot |
The search component that opens under the bar (Didactika) |
bg-body-tertiary, data-bs-theme="dark"navbar-light bg-light, navbar-dark bg-primary |
Light and dark bar |
In this version
Bootstrap 5.3 keeps its colours in CSS variables (--bs-*), so a theme recolours the component with one variable. The bar sits in a container-fluid and the dark bar is set with data-bs-theme="dark".
Bootstrap 4.6 compiles its colours into the classes, so a theme recolours the component by rebuilding its stylesheet. The light and dark bars are navbar-light and navbar-dark, and the search form is form-inline.
Bootstrap 4.6 compiles its colours into the classes, so a theme recolours the component by rebuilding its stylesheet. The light and dark bars are navbar-light and navbar-dark, and the search form is form-inline.
Accessibility
- Wrap it in a
nav(the navbar already is one) and give it anaria-labelif the page has more than one. - The toggler has
aria-controls,aria-expandedandaria-label. - The current page has
aria-current="page". - Everything is reachable with the keyboard in the visual order.