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

You will need to have an existing Starlight website.

Install the packages

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

npm install starlight-sidebar-topics starlight-sidebar-topics-dropdown
# pnpm add starlight-sidebar-topics starlight-sidebar-topics-dropdown
# yarn add 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

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 the src/components/Sidebar.astro component to also render the default sidebar if the user is on desktop.

---
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

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

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.