Navigation languagepickeri18n

Language Picker Pill

Compact dropdown or group to switch between languages.

EN
ES FR JP

Usage

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

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

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

Manual Installation

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

astro 
---
---
<div class="lang-pill">
  <span class="curr">EN</span>
  <div class="list">
    <span>ES</span>
    <span>FR</span>
    <span>JP</span>
  </div>
</div>
<style>
  .lang-pill { background: rgba(255,255,255,0.05); padding: 4px 10px; border-radius: 100px; color: #fff; font-size: 0.75rem; font-weight: 800; border: 1px solid rgba(255, 255, 255, 0.1); cursor: pointer; position: relative; }
  .list { position: absolute; top: 110%; left: 0; background: #111; border-radius: 8px; border: 1px solid #333; display: none; flex-direction: column; z-index: 10; }
  .lang-pill:hover .list { display: flex; }
  .list span { padding: 5px 15px; }
  .list span:hover { background: #6366f1; }
</style>
--- --- <div class="lang-pill"> <span class="curr">EN</span> <div class="list"> <span>ES</span> <span>FR</span> <span>JP</span> </div> </div> <style> .lang-pill { background: rgba(255,255,255,0.05); padding: 4px 10px; border-radius: 100px; color: #fff; font-size: 0.75rem; font-weight: 800; border: 1px solid rgba(255, 255, 255, 0.1); cursor: pointer; position: relative; } .list { position: absolute; top: 110%; left: 0; background: #111; border-radius: 8px; border: 1px solid #333; display: none; flex-direction: column; z-index: 10; } .lang-pill:hover .list { display: flex; } .list span { padding: 5px 15px; } .list span:hover { background: #6366f1; } </style>

Quick Info

Category
Navigation
Filename
LanguagePickerPill.astro
Dependencies
None — pure Astro + CSS
Tags
languagepickeri18n