Animated ElementsCard Nav
A navigation bar that opens downward into cards, each one a menu item with its own click action and optional sub items.
- navbar
- navigation
- menu
- header
- sticky
- sub menu
Animated navbars for GoHighLevel
The navigation bar is the first thing on the page and the one part of it every visitor touches. The builder gives you a row of links. These give you a bar that behaves: it pins, it tightens as the page scrolls, its dropdown glides between items instead of blinking, and on a phone it becomes a real menu rather than a squeezed row.
They split into two shapes. Card Nav, Morph Menu Nav, Pill Slide Nav and Resizable Navbar are bars: logo, links and one or two buttons across the top. Circle Reveal Menu, Bubble Menu and Staggered Menu are a logo and a single menu button that opens onto the whole screen, for pages where the navigation should stay out of the way until it is asked for.
The elements
In this category
Morph Menu Nav
A full navigation bar whose single dropdown morphs in size and glides between menu items, with a mobile menu.
- navbar
- navigation
- menu
- dropdown
- sticky
- mobile
Pill Slide Nav
A navigation bar built around a pill strip of links with a solid pill that slides under the pointer and inverts the text.
- navbar
- navigation
- tabs
- pill
- sticky
- mobile
Circle Reveal Menu
A minimal header whose round menu button opens a full-screen menu growing out of it in a circle.
- navbar
- hamburger
- overlay
- fullscreen
- menu
- mobile
Resizable Navbar
A full-width navbar that tightens into a floating, frosted pill once the visitor scrolls: it narrows, drops a little, rounds off and picks up a soft shadow. Links in the middle share a pill that glides under the pointer.
- navbar
- sticky
- shrink
- scroll
- pill
- mobile
Bubble Menu
Two floating bubbles (the logo in a pill, the menu in a circle) and a menu that opens as a field of big rounded pills popping up one after another, each tilted a little and taking its own colour under the pointer.
- navbar
- menu
- overlay
- pills
- hamburger
- mobile
Staggered Menu
A logo and a "Menu" button whose side panel arrives in layers: coloured sheets sweep in from the edge, the panel follows, big links rise into place one by one with a small number each, and social links fade up underneath. The button's word rolls to "Close" as its plus turns into a cross.
- navbar
- menu
- side panel
- drawer
- socials
- mobile
How to use them
How to use an animated navbar in GoHighLevel
- 01
Put it at the top of the page
Drop the widget into the first section. Each navbar renders its own markup and can pin to the top of the published page at a distance you set. In the builder and the preview it stays where you placed it, so it never covers what you are editing.
- 02
Set the logo and the links
The logo is a brand name or an image link from Media Storage. Every link carries its own click action, so a menu item can go to a URL, scroll to a section on the same page, open a popup or start a call.
- 03
Add the call to action
Most of the bars take one or two buttons with the full click-action list, or none. Decide where they live on a phone: in the bar, inside the menu, or hidden.
- 04
Choose how it behaves on scroll
Pin it, let it slide away as the visitor scrolls down, or have Resizable Navbar tighten into a floating pill. The shrink only runs while the bar is pinned on the published page, and a switch shows the shrunk look while you style it.
- 05
Check the phone menu
Below a width you choose, the bars swap to a menu button. Open it in the builder’s mobile view and check the link size, the order and where the buttons ended up.
New to the app? Start with the install and setup guide.
Questions
Navbars, answered
- Can I make a sticky navbar in GoHighLevel with this?
- Yes. Every navbar can pin to the top of the published page with an offset, and several can slide away on scroll and return when the visitor scrolls back up. Pinning applies on live pages only, so the bar never floats over the builder canvas.
- Do the menu links scroll to sections on the same page?
- Yes. Each link has its own click action, and scroll to element is one of them. Add Page Settings to the page and you can also set smooth scrolling with an offset, so a section does not land underneath the pinned bar.
- Is the full-screen menu accessible?
- The overlay menus are built as dialogs: inert while closed, focus stays inside while open, and Escape or a click beside the menu closes them.