Installation

A Starlight plugin that adds side navigation strips, floating buttons, keyboard shortcuts, and swipe gestures for moving between pages, with hover tooltips and support for mobile devices, while keeping Starlight’s built-in previous/next links at the bottom of each page.

Prerequisites

You will need to have a Starlight website set up. If you don’t have one yet, you can follow the “Getting Started” guide in the Starlight docs to create one.

Installation

1. starlight-custom-navigation is a Starlight plugin. Install it by running the following command in your terminal:

   npm

   npm install starlight-custom-navigation

   pnpm

   pnpm add starlight-custom-navigation

   Yarn

   yarn add starlight-custom-navigation

2. Configure the plugin in your Starlight configuration in the astro.config.mjs file.

   astro.config.mjs

   import starlight from '@astrojs/starlight'
   import { defineConfig } from 'astro/config'
   import starlightCustomNavigation from 'starlight-custom-navigation'
   
   export default defineConfig({
     integrations: [
       starlight({
         plugins: [
              // Default configuration
              starlightCustomNavigation()
          ],
         title: 'My Docs',
       }),
     ],
   })

3. Start the development server to preview the plugin in action.

   The plugin will automatically:

   • Show vertical navigation strips beside the content on wide screens
   • Show compact floating buttons with auto-hide on smaller screens
   • Support touch swipe gestures on mobile
   • Enable keyboard shortcuts for navigation