Navbar Pro
Navbar Pro is a Bric for building site navigation in Blocs for Mac. It combines a wide logo, site menu, language links, and a light/dark appearance switch in one bar. In previews and on the published site, the bar stays fixed at the top of the screen and switches to a hamburger menu according to the screen width.
You can set separate logos and colors for light and dark appearance, hide the bar when scrolling down, and use transparent or translucent backgrounds while the bar overlaps areas such as photos. For a shared site header, place one instance in the upper Global Area.
Download Navbar Pro 1.0.11 / User guide
Examples
The eMotionGraphics Almanac uses Navbar Pro for its site navigation. Open it to try the responsive layout, menu opening and closing, and appearance switch. The following figures are screenshots of that published page with boxes, arrows, and English labels added.
Horizontal navigation
The logo area aligns left, while the area containing the menu and controls aligns right. The right side includes site links, the appearance switch, and language links.
Figure 1: At a viewport width of 1280px, blue marks the logo area and red marks the combined area for site links, the appearance switch, and language links.
Hamburger button and expanded menu
On narrow screens, the horizontal items are grouped behind a hamburger button. Pressing it opens the menu and turns the button into a close button.
Figure 2: The menu is closed. Use the button outlined in red to open it.
Figure 3: The open menu at a viewport width of 393px. 1 is the close button, 2 the site links, 3 the appearance switch, and 4 the language links. The red About text highlights the current page.
The photographed site uses Toggle MD, which switches to the hamburger menu at 991px or narrower. A newly placed Bric defaults to LG, which switches at 1199px or narrower. Change this width with Toggle in the user guide.
Features
| Feature | Display or behavior |
|---|---|
| Logo and menu | Places the logo on the left and the menu, language links, and other controls on the right |
| Hamburger menu | Groups links into a menu at or below the selected width, with a button to open and close it |
| Current-page highlighting | Uses the Highlight color for the menu link that matches the open page |
| Language links | Opens the corresponding version of the current page in another language and displays the current language as text |
| Appearance switch | Switches logos and link colors between light and dark appearance and saves the choice in the browser |
| Scroll behavior | Hides the bar when scrolling down and shows it again when scrolling up |
| Overlay | Makes the bar background transparent or translucent while it overlaps an area with the specified class |
| Width control | Centers the inner content within a maximum width, or aligns it with the parent column |
The menu has one level. It does not provide dropdowns or mega menus. Configuring language links does not translate content or generate language pages. Prepare styles for light and dark body content on the site itself as well.
Requirements
This Bric is designed for Blocs 6 for Mac. It uses JavaScript to open and close the menu, generate language links, control the bar while scrolling, and switch appearance. The appearance choice is saved in the browser's localStorage.
After configuring logos and links on the editing canvas, check the behavior in a preview or on the published site. Current-page highlighting and the appearance switch cannot be checked on the canvas alone.
How to use it
- For a shared site header, place one instance in the upper Global Area.
- Add light and dark logos, menu items, and language links.
- Choose the hamburger breakpoint and check the result in a preview.
See the user guide for input formats, appearance, scrolling, overlays, and checks before publishing. Place Navbar Pro as a header, separately from the extension Bloc used by Math Renderer and Code Highlighter.
Settings
Configure logos, colors, menus, behavior, and overlays. The settings reference lists defaults and ranges.
Detailed guides
| What you want to do | Read |
|---|---|
| Place and configure the header, then check it before publishing | Navbar Pro user guide |
| Look up defaults and ranges | Settings reference |
Verification scope
On November 7, 2026, the configuration data and published code for Navbar Pro 1.0.11 were reviewed, and language link generation was tested locally. The menu has ARIA attributes, but it does not include Escape-key closing or a focus trap within the open menu. Before publishing, check it on the devices and with the input methods you intend to support.
The examples were captured from the live About page on October 27, 2026, using Firefox Responsive Design Mode, at viewport widths of 1280px and 393px and a device pixel ratio of 3. SVG boxes, arrows, and labels are overlaid on the unchanged captures. No separate demo page was created.
Find a section from the previous article
Detailed instructions now have their own pages. Follow a link below to the corresponding section.
| Section | Read |
|---|---|
| 1. Place Navbar Pro in the header | Read section |
| 2. Add logos for light and dark appearance | Read section |
| 3. Enter menu links | Read section |
| Current-page highlighting | Read section |
| Preview and published URLs | Read section |
| 4. Configure language links | Read section |
| 5. Choose the hamburger breakpoint | Read section |
| 6. Configure appearance and scroll behavior | Read section |
| 7. Configure an overlay over photos | Read section |
| 8. Adjust the inner width | Read section |
| Logo | Read section |
| Colors | Read section |
| Menu | Read section |
| Behavior | Read section |
| Overlay | Read section |
| Check attachments | Read section |
| Before publishing | Read section |
| Troubleshooting | Read section |