Blocks/Navigation(54)

Navbar components and menus.

PRO

navbar82

Full Screen Menu Navbar

A minimal bar with a wordmark, a sliding-marker pill and a two-line menu toggle that turns into a cross, opening a full-screen ink menu with film grain: numbered oversized serif links settle in one after another on the left, the photograph and description on the right blur to whichever link is hovered, and a ruled foot carries contact details, social links and the pill. The menu is always in the markup and shown with CSS.

PRO

navbar81

Columns Mega Navbar

A sticky frosted navbar with two mega items, each dropping a full-width panel of three small-caps link groups in serif type beside a soft featured card with a photograph, an eyebrow and a lifting arrow link. Every panel stays in the markup and is shown with CSS; a light mobile menu groups the same links.

PRO

navbar80

Photo Mega Navbar

A sticky frosted navbar whose first item opens a full-width panel: a ruled list of serif services on the left that brightens and slides an arrow in on hover while the photograph on the right blurs to the matching room, plus plain links, a sliding-marker pill and a light mobile menu. The panel is always in the markup and shown with CSS.

PRO

navbar79

Announcement Navbar

A sticky navbar topped by a thin ink announcement bar with a small-caps link, then a frosted bar with the serif wordmark, uppercase links that underline from the left on hover, a sliding-marker pill, and a light full-height mobile menu whose links settle in one after another.

PRO

navbar78

Classic Navbar

The classic layout in the language: serif wordmark on the left, uppercase letter-spaced links in the middle that underline from the left on hover, a quiet text link and a sliding-marker pill on the right, and a light full-height mobile menu whose links settle in one by one.

PRO

navbar77

Centred Wordmark Navbar

A sticky, frosted navbar with the serif wordmark in the centre, uppercase letter-spaced links split to either side that underline from the left on hover, a small sliding-marker pill, and a full-height light mobile menu whose links settle in one after another.

PRO

navbar76

Veil Navbar

A sticky, frosted navbar with a serif wordmark, uppercase letter-spaced links that underline from the left on hover, a sliding-marker pill action, and a full-height ink mobile menu whose links settle in one after another.

PRO

navbar75

Masthead Navigation With Mega Panel

A publication masthead whose first section opens a full width panel split by hairlines into the newest issue and two indexed columns, always in the markup and revealed with CSS.

PRO

navbar74

Floating Capsule Navbar

A navbar contained in a softly rounded, bordered capsule with a lowercase wordmark, uppercase links, an accent call to action, and a matching mobile panel.

PRO

navbar73

Announcement Bar Navbar

A navbar with a dark announcement strip above a hairline-bordered row carrying a lowercase wordmark, uppercase links, a sign-in link, an accent call to action, and a mobile menu.

PRO

navbar72

Centered Link Navbar

A minimal navbar with a lowercase wordmark, absolutely centered uppercase text links, an accent call to action, and a collapsing mobile menu.

PRO

navbar71

Pill Menu Navbar

A light editorial navbar with a lowercase wordmark, soft muted nav pills that reveal hover dropdowns, a solid accent call to action, and a collapsing mobile menu.

PRO

navbar70

Dark Three-Column Mega Navbar

Inverted bg-foreground navbar with a three-column mega panel — an intro pitch, a numbered index list and a full-color featured image tile, divided by hairline rules. Outline pill CTAs throughout. Closes on outside click or Escape.

PRO

navbar69

Promo Mega Navbar

Airy navbar with one mega item and two plain links — its panel pairs grouped link columns with a featured promo card. A primary pill CTA plus an expanding search field that swaps in over the actions. Closes on outside click or Escape.

PRO

navbar68

Command Search Navbar

Search-forward navbar — a wide rounded search field sits at the center with an animated submit seal, framed by the wordmark, quiet links and a pill CTA.

PRO

navbar67

Poster Split Navbar

Poster-scale navbar — an oversized wordmark anchors the left while a right column stacks the nav, a pill CTA and a parenthetical label. Collapses to a stacked mobile menu.

PRO

navbar66

Featured Mega Navbar

Mega-menu navbar whose panels lead with a featured project — a full-color image card with a parenthetical category beside a ruled link list. SSR-mounted panels and a stacked mobile menu.

PRO

navbar65

Status Tier Navbar

Two-tier navbar — a top strip carries an availability badge with a live dot and utility links, over a main row with an oversized wordmark, nav and pill CTA.

PRO

navbar64

Fullscreen Overlay Navbar

A quiet top bar whose menu button opens a full-screen overlay — oversized numbered links with hover arrows, a contact block and social row beneath. Pure Auralis big type.

PRO

navbar63

Floating Pill Navbar

A floating rounded-full navbar island resting on a muted band — wordmark, quiet links and a pill CTA, with a rounded mobile menu card that drops below.

PRO

navbar62

Announcement Marquee Navbar

Navbar with a dark scrolling announcement bar on top — looping links that pause on hover and fade at the edges — over a clean wordmark row with a pill CTA.

PRO

navbar61

Use-Case Mega Navbar

Navbar with a marked wordmark and a pill-highlighted trigger that drops a floating rounded mega panel — a parenthetical label over a 3x2 grid of icon use-case cards. Sign-in pill plus a primary CTA.

PRO

navbar60

Mega Studio Navbar

Full mega-menu navbar — bold links open three-column panels with parenthetical section labels, descriptions and a footer link. SSR-mounted panels, pill CTA and a stacked mobile menu.

PRO

navbar59

Studio Bar Navbar

Editorial single-row navbar — bold wordmark, quiet bold links, and an outline pill CTA. Collapses to a clean full-height mobile menu.

Markdown version