nexoHRa logo
Design Lab — Internal Preview

Fifty navbars. One unmistakable taste.

A curated showcase of 50 unique navigation concepts — 20 solid-surface, 10 transparent hero overlays, 10 shaped-border navs, and 10 pendant navs (semicircle, trapezoid, jewel, teardrop, orb, crown). Each one is engineered with motion and a premium tone.

01

Crystal Glass Pill

Floating frosted-glass pill with a polished inner shadow and gradient CTA.

02

Magnetic Pill Slider

A morphing gradient pill glides to the link the cursor hovers — silky and intentional.

03

Underline Sweep

Minimal editorial nav with a gradient underline that sweeps in from the center.

04

Onyx & Gold

A luxury, jewellery-grade aesthetic — onyx black with champagne-gold accents.

06

Center-Split Logo

Symmetric, magazine-cover composition with the wordmark anchored in the center.

07

Marquee Ticker + Nav

A premium announcement ribbon scrolls above a clean executive-style navbar.

New: AI-powered onboardingTrusted by 200+ teamsPRO services across UAESave up to 60% vs in-house HRNew: AI-powered onboardingTrusted by 200+ teamsPRO services across UAESave up to 60% vs in-house HRNew: AI-powered onboardingTrusted by 200+ teamsPRO services across UAESave up to 60% vs in-house HR
08

Side Rail Expand

A persistent vertical rail that elegantly expands on hover for app-shell layouts.

Hover the rail to expand. A persistent side navigation for app shells & dashboards.

09

Floating Dock

A macOS-inspired dock with icon magnification and ambient glassmorphism.

10

Diagonal Slash

Angular, parallelogram-cut links with a directional gradient sweep on hover.

11

Animated Gradient Border

A conic-gradient halo rotates around each link as the cursor lingers.

12

Spotlight Follow

A soft cursor spotlight glides across the bar — futuristic and product-led.

13

Command Palette

Developer-grade UX: a global ⌘K search button is the centerpiece of the navbar.

14

Editorial Serif

Centered, small-caps wordmark with whisper-thin dividers — magazine elegance.

15

Spring Pill

Each link is hugged by a gradient pill that springs into place — playful & premium.

16

Numbered Index

Each link is paired with a monospaced index — a quiet nod to portfolio aesthetics.

17

Reveal Subtitle

A whispered tagline drops in beneath each link on hover — discoverable depth.

18

Floating Bottom Pill

An app-shell bottom-bar in a phone-style canvas — modern, tactile, thumb-friendly.

Mobile-first floating bottom nav

Always in reach

Thumb-friendly, beautifully decoupled from the page.

19

Glow Orb Indicator

A neon orb crowns each hovered link with a soft, premium halo — dark mode delight.

20

Ink Wash Fill

Hovered links are flooded by a gradient wash from the top — couture and confident.

21

Hero Overlay Ghost

Transparent

Fully transparent nav sitting on top of a bold purple hero — pure type and motion.

22

Saturated Glass

Transparent

Transparent body with backdrop-blur and saturate — punchy over a sunset hero.

23

Mix-Blend Difference

Transparent

Text uses blend-difference so it adapts perfectly across light and dark hero halves.

24

Hairline Beneath

Transparent

A whisper-thin gradient hairline anchors a fully transparent nav on a mesh hero.

25

Edge-Fade Mask

Transparent

A horizontal fade mask softens nav edges into the hero — couture transparency.

26

Aurora Sky

Transparent

Transparent nav floats over an animated aurora gradient — luminous and futuristic.

27

Starfield Night

Transparent

Transparent nav over a deep cosmos backdrop — small stars sparkle on hover.

28

Glass Pill Over Photo

Transparent

A compact, fully glass pill floats on a vibrant hero scene — invite-only premium feel.

29

Floating Hero Wordmark

Transparent

Top-centered logo and transparent items — for landing pages with a big hero moment.

30

Soft Sky Hero

Transparent

Transparent nav over a pastel sky — quiet, modern, and unmistakably high-end.

31

Double Scallop Banner

Shaped

A solid-white nav with two graceful scallops on the bottom edge — banner-couture.

32

Sine Wave Bottom

Shaped

Continuous, hand-drawn sine wave on the bottom — playful yet refined.

33

Hanging Logo Tab

Shaped

A pedestal tab drops from the center cradling the wordmark — emblematic and bold.

34

Concave Arch

Shaped

An onyx bar with a single wide concave arch — architectural and minimal.

35

Convex Pendant

Shaped

The bottom-center bulges into a soft pendant — couture confidence over rich purple.

36

Ribbon V-Notches

Shaped

Two V-cuts at the ends evoke a ceremonial ribbon — premium with a celebratory edge.

37

Crenellated Teeth

Shaped

Castle-like battlements line the bottom — bold, structured, unmistakable.

38

Triangle Pennants

Shaped

A row of downward pennants — festive bunting energy with a gradient ribbon body.

39

Active Tab Drop

Shaped

A single tab protrudes from the bottom under the active link — clear, premium IA.

40

Cathedral Arches

Shaped

Six connected arches in onyx + gold — a heritage, jewellery-counter aesthetic.

41

Semicircle Pendant

Pendant

A smooth half-circle cradles the wordmark beneath the nav — a logo-pedestal moment.

42

Trapezoidal Pedestal

Pendant

An angled trapezoid pedestal hangs below — architectural, museum-plaque elegance.

43

Rounded Tab Drop

Pendant

A pill-shaped tab drops beneath the bar to cradle the wordmark — soft and modern.

44

Inverted V Spear

Pendant

A precise V-spear drops from the center — directional, sharp, and unmistakably bold.

45

Hex Jewel Pendant

Pendant

A jewel-cut hexagonal pendant in onyx and gold — bespoke and high-jewellery.

46

Teardrop Pendant

Pendant

A soft teardrop pendant — fashion-forward couture with a rose-blush palette.

47

Glow Orb Pendant

Pendant

A pill pendant holds a pulsing brand orb — premium app-shell vibes.

48

Tiered Pedestal

Pendant

A two-step staircase pendant in violet gradient — structural and confident.

49

Wide Plateau Banner

Pendant

A broad rounded plateau hangs beneath the bar — ideal for a hero tagline.

WelcomeBespoke HR, from day one.
50

Crowned Pendant

Pendant

A regal pendant with a small triangular peak — the centerpiece of a flagship hero.

That's all fifty

Have a favorite?

These concepts are designed to be drop-in. Tell us the number you like and we'll wire it up to the live site with your real routes, branding, and CTAs.

Pick a navbar