<Sidebar>

The <Sidebar> component is an override of Starlight’s <Sidebar>, and has been reworked to contain the website title, search bar, theme/language switcher, and social icons (which were moved from the <PageFrame> component).

This component is the one that is rendered on the left side of the page, and contains information about the website itself.

Usage

Overriding

If you want to extend the <Sidebar> component for your own website, you can do so by creating your own override as seen below.

1. Create your own Sidebar.astro component in the src/overrides directory (or src/components if you prefer).

   ---
   import type { Props } from '@astrojs/starlight/props';
   import Default from '@astrojs/starlight/components/Sidebar.astro';
   import Search from 'virtual:starlight/components/Search';
   import SiteTitle from 'virtual:starlight/components/SiteTitle';
   import MobileMenuFooter from 'virtual:starlight/components/MobileMenuFooter';
   
   import config from 'virtual:starlight/user-config';
   
   const shouldRenderSearch = config.pagefind || config.components.Search !== '@astrojs/starlight/components/Search.astro';
   ---
   
   <div class="sidebar-top">
     <div class="title-wrapper ">
       <SiteTitle {...Astro.props} />
     </div>
   
     {shouldRenderSearch && <Search {...Astro.props} />}
   
     <MobileMenuFooter {...Astro.props} />
   </div>
   
   <Default {...Astro.props}><slot /></Default>

2. Add the Sidebar override to your astro.config.mjs file.

   astro.config.mjs

   import starlight from '@astrojs/starlight'
   import { defineConfig } from 'astro/config'
   
   export default defineConfig({
     integrations: [
       starlight({
         title: 'My Docs',
         components: {
           // Override the theme's `Sidebar` component.
           Sidebar: './src/overrides/Sidebar.astro'
         },
       }),
     ],
   })