Skip to content
Blog

Starlight Topics Dropdown and List together

A beautiful cover image with the text "Dropdown and List?"
trueberryless
trueberryless
Felix Schneider

Using the Starlight Sidebar Topics plugin together with the Starlight Sidebar Topics Dropdown component, you can create a website that has a list of topics on desktop and a dropdown menu on mobile.

Prerequisites

Section titled “Prerequisites”

You will need to have an existing Starlight website.

Install the packages

Section titled “Install the packages”

First, install the starlight-sidebar-topics plugin and also the starlight-sidebar-topics-dropdown component:

Terminal window
npm install starlight-sidebar-topics starlight-sidebar-topics-dropdown

Afterwards, follow the setup guides from Starlight Sidebar Topics and Starlight Sidebar Topics Dropdown.

Modify the Sidebar component

Section titled “Modify the Sidebar component”

In the setup guide from the dropdown component, you have created a sidebar component, which only renders the dropdown menu. Now, you need to modify this component to also render the default sidebar if the user is on desktop.

src/components/Sidebar.astro
---
import Default from '@astrojs/starlight/components/Sidebar.astro';
import Topics from 'starlight-sidebar-topics/components/Sidebar.astro';
import TopicsDropdown from 'starlight-sidebar-topics-dropdown/TopicsDropdown.astro';
---


<div class="topics">
  <Topics/>
</div>
<div class="topics-dropdown">
  <TopicsDropdown/>
</div>
<Default><slot /></Default>


<style>
  /* Hide topics by default and show them on medium screens and larger */
  .topics {
    display: none;
  }


  @media (min-width: 800px) {
    .topics {
      display: block;
    }
  }


  /* Show topics dropdown on small screens and hide it on medium screens and larger */
  .topics-dropdown {
    display: block;
  }


  @media (min-width: 800px) {
    .topics-dropdown {
      display: none;
    }
  }
</style>

Result

Section titled “Result”

If you follow these steps, your sidebar will look like this:

Final result with desktop view on the left and mobile view on the right

You can find the complete source code of this guide in this StackBlitz example.

Endless possibilities

Section titled “Endless possibilities”

You could also do it the other way around (list on mobile, dropdown on desktop) by swapping the display: block and display: none properties in the CSS.

Moreover, you could also create your own display component, which uses the route data from the Starlight Sidebar Topics plugin and renders the topics in a custom way. This is a bit more advanced, but you can find more information about this in the “Custom Topics List” documentation.

Tags: