Four new navbar shapes: Segmented, Underline, Dock and Neon

Segmented, Underline glide, Dock and Neon join the pill bar, and the navbar can tighten up as you scroll.

By Darryl Waterhouse · · 1 min read

The pill bar has company. Domma CMS 1.13 adds four more shapes for your navbar, and a bar that tightens up as visitors scroll.

In Content > Menus, open your navbar menu and go to the Behaviour tab. Bar shape now offers:

  • Segmented - your links sit in a tray, and a raised thumb slides to whichever one the pointer is over, then comes back to rest on the page you are on. It feels like a switch in an app. The Ginga Ninja uses it.
  • Underline glide - no tray at all. A short coloured bar glides under the link you point at. Clean and editorial.
  • Dock - the links swell gently as the pointer passes over them, like the dock on a Mac.
  • Neon - a glowing edge round the tray and a glow on the link. Made for dark themes.

Segmented, Dock and Neon float over the top of the page without a strip behind them, just like Pill. Underline keeps the strip, since it has no tray - change Bar background if you would rather it floated too.

Tick Shrink when the page scrolls and the bar tightens up once a visitor starts reading, giving the page a little more room.

You can try any of them on a single page first with the navbar tag, for example [navbar bar="segmented" shrink="true" /]. Visitors who ask their device for reduced motion get the shapes without the movement.

Also in this release: a dropdown's little arrow no longer leaves a gap before the next link in the bar, and a few fixes to collection entry forms.