SlowlyNav
A full navigation builder, from a simple row of links to a mega menu.
The Nav block builds a site's navigation, from a plain row of links to a full mega menu with panels of content. It is what you reach for whenever a site needs wayfinding that responds to screen size.
It is a small family of blocks: the Nav wraps it, Nav Items holds the links, a Nav Link is a single link, and a Nav Dropdown opens a panel under a link for richer content. A Nav Menu can pull in an existing WordPress menu instead of building the links by hand.
Adding one
- Select the section or container to hold the navigation.
- Open the inserter and search "nav".
- Pick the Nav block; Slowly adds the wrapper and a Nav Items child to start from.
Settings
In the nav's own panel. Appearance lives in the shared design panel.
| Setting | What it does | Reach for it when |
|---|---|---|
| Mobile breakpoint | The viewport width at which the desktop nav hides and the mobile menu trigger appears | Always; the default is tablet, move it up or down to match the design |
| Mobile menu type | How the mobile menu enters: a full-screen overlay, a side drawer, or a push panel | Drawer for minimal disruption; overlay for full-focus menus |
| Mobile menu placement | Which edge the drawer or panel slides in from | Left or right depending on the site's reading direction and logo placement |
| Animated trigger | Whether the hamburger icon animates as it opens and closes | On by default; the animation type, size, and duration are all adjustable below |
| Disable scroll when open | Locks the page behind the open mobile menu | On by default; keeps visitors from scrolling content they cannot see |
| Dropdown open on | Whether sub-menus open on hover or on click | Click is more accessible; hover is faster on pointer devices with deep menus |
| Dropdown placement | Where the dropdown panel appears relative to its trigger link | Below is standard; adjust for navs anchored to screen edges |
| Dropdown animation | The entrance and exit style for dropdown panels | Fade or slide; off if you prefer no motion |
| Full-width dropdown | Stretches the dropdown to the full width of the nav | Mega menus with multiple columns of links or rich content |
| Hide caret | Removes the small arrow that signals a link has a dropdown | When the dropdown trigger is already clear from the layout |
| Scroll direction | Hides the nav on scroll-down and reveals it on scroll-up | Sticky headers where you want to recover screen space while reading |
| Group dividers | Adds a visual separator between link groups inside a dropdown | Dropdown panels with distinct link categories |
Styling
The nav and each of its child blocks use the shared design panel. Style the Nav block for the outer wrapper, Nav Items for the link row, and individual Nav Link or Nav Dropdown blocks for the links themselves. The hover and active states are where you set the current-page indicator and the link hover colour.
Accessibility
- Give the mobile menu trigger a descriptive ARIA label (the animated trigger has a dedicated aria label field in settings); "Open navigation menu" is clearer than a bare icon with no label.
- Active-page links need a visible current-state indicator beyond colour alone so they are distinguishable for low-vision visitors.
- If you use hover-open dropdowns, confirm the panels are also reachable by keyboard, since hover-only menus are invisible to keyboard and switch-access users.
- Keep the focus order logical: links should tab in the same sequence they appear visually, and dropdown panels should follow their trigger immediately.