Navbar Floating
A glass pill that hides on scroll down, with a gliding hover highlight and a mobile sheet.
- Type: Navbar section
- Styles: Dark, Minimal
- Licence: Charcoal UI Pro
About Navbar Floating
Navbar Floating is a glass pill that hides on scroll down and returns on scroll up, with a gliding hover highlight and a mobile sheet menu.
It is a full-width navbar section for React and Tailwind CSS 4, in a dark and minimal style. Preview it at any width above, then install it with one command.
When to use Navbar Floating
- SaaS and product sites.
- Landing pages.
- Portfolios.
- Docs sites.
How it is built
Scroll direction drives visibility, and Sheet holds the mobile menu with focus trapping.
It is composed from Button, Sheet, so installing it also installs those components, and you can restyle each one the same way you would on its own.
Goes well with Navbar Floating
Navbar Floating is part of 83 full templates, so you can see it in a finished page.
- Ember template: An AI product site that glows.
- Kiln template: Ship-ready docs-first dev tool page.
- Hearth template: A home for your app launch.
- Relay template: Status updates that write themselves.
- Lattice template: Generate, keep, sell.
- Meridian template: The CRM for teams under fifty.
- Tessera template: Every meeting, already written up.
- Halcyon template: Support that answers in seconds.
- Cadence template: Book meetings without the back-and-forth.
- Aperture template: Know what users do, and why.
- Lane template: Catch the bug in review, not in prod.
- Tidepool template: Postgres that scales to zero and back.
- Glyph template: Four thousand icons, one style.
- Sentinel template: Know before your users do.
- Keystone template: Login, done in an afternoon.
- Patchnote template: Release notes people actually read.
- Terminus template: A terminal with taste.
- Northlane template: A studio site that reads like a manifesto.
- Foundry template: Big agency work, small agency speed.
- Hartwell template: Let the pictures do the talking.
- Northlight template: Showreel first, everything else second.
- Monograph template: A one-person portfolio that books calls.
- Plinth template: Buildings, told like stories.
- Fieldwork template: Senior engineers, on retainer.
- Parallel template: Movement is the message.
- Copyhouse template: Words that sell, from one writer.
- Halo template: One product, every angle.
- Lumi template: Drag the slider, buy the app.
- Dropline template: Built for the hour everything sells out.
- Groove template: One great record, every month.
- Juniper template: Wood fire, small plates, booked tables.
- Fixwell template: Book a pro in two minutes.
- Kinfolk template: Bread, coffee and three neighbourhood shops.
- Fade template: Book a chair, skip the wait.
- Summit template: Memberships, classes and coaches.
- Timberline template: Cabins within three hours of the city.
- Brightside template: A dentist people don't dread.
- Keyhaven template: Homes, neighbourhoods and the people who know them.
- Stillwater template: Treatments, booked in a breath.
- Signal template: Sell out a conference.
- Off the Clock template: A home for a show and its listeners.
- Halden template: A band site: album, tour, merch.
- Reel template: Ten days, ninety films.
- Fieldnotes template: Long reads, beautifully set.
- Townhall template: Sessions people register for.
- Frequency template: Listener-funded radio, live worldwide.
- Ledger template: Bookkeeping that reads like a newspaper.
- Tally template: Cards, receipts and budgets in one place.
- Vault template: Save without thinking about it.
- Payline template: Accept money anywhere with one API.
- Harbor template: Payroll in ten minutes a month.
- Seedling template: Raise money for something that grows.
- Paperclip template: Get paid faster, freelancer.
- Canopy template: Insurance explained in plain English.
- Breathe template: Ten quiet minutes a day.
- Rota template: Shift planning, built by nurses.
- Carebridge template: See a doctor today, from your sofa.
- Nourish template: A coach in your pocket, a plan on your plate.
- Trailhead template: Guided hikes, every weekend.
- Lotus template: Classes, teachers and a timetable.
- Nocturne template: A bedside device that fixes your nights.
- Kindred template: Find a therapist you actually click with.
- Darkroom template: A course people finish.
- Forkcamp template: From zero to hired in 16 weeks.
- Lingo template: Speak a new language in 15 minutes a day.
- Quadrangle template: Programmes, people and open days.
- Sprout template: Coding classes kids beg to go to.
- Cohort template: Sell a course like a creator.
- Archive template: A library people can search.
- Tutorly template: The right tutor, this week.
- Commons template: Bring your members home.
- Patron template: Let your audience fund the work.
- Gather template: Monthly meetups, sorted.
- Hive template: Desks, rooms and people worth sitting near.
- Tideline template: A nonprofit site that raises money.
- Campfire template: Group chat that stays readable.
- Backstage template: Members-only videos, done properly.
- Crew template: A careers page people apply from.
- Nova template: Take pre-orders before you ship.
- Manifest template: Turn launch day into a sales day.
- Kickstart template: Back the first production run.
- Pilot template: Recruit your first beta testers.
- Pocket template: Launch an app, get the downloads.
- Navbar Mega Menu: A full-width React navbar with a mega menu on hover or focus
- Navbar Announcement: A React navbar with a dismissible announcement bar, Cmd+K search and sheet
- Navbar Centered: An editorial shop React navbar with a centred serif wordmark that shrinks
- Button: An animated React button with six variants, spring press feedback and a width-stable loading state
- Sheet: An animated React side sheet on the native dialog element that you can fling closed
Install Navbar Floating
npx shadcn@latest add @charcoal/navbar-floatingNavbar Floating is part of Charcoal UI Pro: one seat covers all 107 sections, 100 templates and 300 Pro components, for unlimited projects. The command installs the section into components/sections along with every component it uses.
Frequently asked questions
- Does Navbar Floating work with Next.js?
- Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.
- Can I change the copy and colours?
- Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.