Navigation retronavigationgame

Retro Arcade Menu

8-bit style navigation with pixelated font and selection arrows.

▶ LOAD GAME
OPTIONS
EXIT

Usage

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

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

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

Manual Installation

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

astro 
---
---
<div class="retro-menu">
  <div class="item selected">▶ LOAD GAME</div>
  <div class="item">OPTIONS</div>
  <div class="item">EXIT</div>
</div>
<style>
  .retro-menu { background: #000; border: 4px solid #fff; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; width: fit-content; }
  .item { font-family: 'Courier New', monospace; font-weight: 900; color: #fff; font-size: 1.2rem; cursor: pointer; }
  .item.selected { color: #facc15; }
</style>
--- --- <div class="retro-menu"> <div class="item selected">▶ LOAD GAME</div> <div class="item">OPTIONS</div> <div class="item">EXIT</div> </div> <style> .retro-menu { background: #000; border: 4px solid #fff; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; width: fit-content; } .item { font-family: 'Courier New', monospace; font-weight: 900; color: #fff; font-size: 1.2rem; cursor: pointer; } .item.selected { color: #facc15; } </style>

Quick Info

Category
Navigation
Filename
RetroArcadeMenu.astro
Dependencies
None — pure Astro + CSS
Tags
retronavigationgame