Navigation tabsnavigationfloating

Floating Tab Bar

Segmented navigation bar that sits above the content.

Usage

Copy the full block below to use this component with its imports.

astro 
---
import { FloatingTabBar } from 'astro-component-kit';
---

<FloatingTabBar>Content</FloatingTabBar>
--- import { FloatingTabBar } from 'astro-component-kit'; --- <FloatingTabBar>Content</FloatingTabBar>

Manual Installation

If you are not using the npm package, create a new file src/components/lib/FloatingTabBar.astro and paste the following code:

astro 
---
---
<div class="float-tabs">
  <button class="active">Discover</button>
  <button>Trending</button>
  <button>Following</button>
</div>
<style>
  .float-tabs { display: flex; gap: 4px; background: rgba(0,0,0,0.4); padding: 5px; border-radius: 100px; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.1); width: fit-content; margin: 2rem auto; }
  .float-tabs button { background: none; border: none; padding: 0.6rem 1.4rem; color: #94a3b8; font-weight: 600; font-size: 0.85rem; border-radius: 100px; cursor: pointer; transition: 0.3s; }
  .float-tabs button.active { background: #fff; color: #000; }
</style>
--- --- <div class="float-tabs"> <button class="active">Discover</button> <button>Trending</button> <button>Following</button> </div> <style> .float-tabs { display: flex; gap: 4px; background: rgba(0,0,0,0.4); padding: 5px; border-radius: 100px; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.1); width: fit-content; margin: 2rem auto; } .float-tabs button { background: none; border: none; padding: 0.6rem 1.4rem; color: #94a3b8; font-weight: 600; font-size: 0.85rem; border-radius: 100px; cursor: pointer; transition: 0.3s; } .float-tabs button.active { background: #fff; color: #000; } </style>

Quick Info

Category
Navigation
Filename
FloatingTabBar.astro
Dependencies
None — pure Astro + CSS
Tags
tabsnavigationfloating