···11+---
22+title: Getting Started
33+---
44+55+Starlight plugin to split your docs page into multiple subpages and switch between them with a dropdown menu in the sidebar.
66+77+## Prerequisites
88+99+You will need to have a Starlight website set up.
1010+If you don't have one yet, you can follow the ["Getting Started"](https://starlight.astro.build/getting-started) guide in the Starlight docs to create one.
1111+1212+## Installation
1313+1414+import { Steps, Tabs, TabItem } from '@astrojs/starlight/components'
1515+1616+<Steps>
1717+1818+1. `starlight-sidebar-topics-dropdown` is a Starlight [plugin](https://starlight.astro.build/reference/plugins/). Install it by running the following command in your terminal:
1919+2020+ <Tabs syncKey="pkg">
2121+2222+ <TabItem label="npm">
2323+2424+ ```sh
2525+ npm install starlight-sidebar-topics-dropdown
2626+ ```
2727+2828+ </TabItem>
2929+3030+ <TabItem label="pnpm">
3131+3232+ ```sh
3333+ pnpm add starlight-sidebar-topics-dropdown
3434+ ```
3535+3636+ </TabItem>
3737+3838+ <TabItem label="Yarn">
3939+4040+ ```sh
4141+ yarn add starlight-sidebar-topics-dropdown
4242+ ```
4343+4444+ </TabItem>
4545+4646+ </Tabs>
4747+4848+2. Configure the plugin in your Starlight [configuration](https://starlight.astro.build/reference/configuration/#plugins) in the `astro.config.mjs` file.
4949+5050+ ```diff lang="js"
5151+ // astro.config.mjs
5252+ import starlight from '@astrojs/starlight'
5353+ import { defineConfig } from 'astro/config'
5454+ +import starlightSidebarTopicsDropdown from 'starlight-sidebar-topics-dropdown'
5555+5656+ export default defineConfig({
5757+ integrations: [
5858+ starlight({
5959+ + plugins: [starlightSidebarTopicsDropdown()],
6060+ title: 'My Docs',
6161+ }),
6262+ ],
6363+ })
6464+ ```
6565+6666+3. [Start the development server](https://starlight.astro.build/getting-started/#start-the-development-server) to preview the plugin in action.
6767+6868+</Steps>
+30
docs/src/content/docs/index.mdx
···11+---
22+title: starlight-sidebar-topics-dropdown
33+description: Starlight plugin to split your docs page into multiple subpages and switch between them with a dropdown menu in the sidebar.
44+head:
55+ - tag: title
66+ content: starlight-sidebar-topics-dropdown
77+template: splash
88+editUrl: false
99+hero:
1010+ tagline: Starlight plugin to split your docs page into multiple subpages and switch between them with a dropdown menu in the sidebar.
1111+ image:
1212+ file: ../../assets/houston.webp
1313+ actions:
1414+ - text: Get Started
1515+ link: /getting-started/
1616+ icon: right-arrow
1717+---
1818+1919+import { Card, CardGrid } from '@astrojs/starlight/components'
2020+2121+## Next steps
2222+2323+<CardGrid stagger>
2424+ <Card title="Install the plugin" icon="puzzle">
2525+ Check the [getting started guide](/getting-started/) for installation instructions.
2626+ </Card>
2727+ <Card title="Configure the plugin" icon="setting">
2828+ Edit your config in the `astro.config.mjs` file.
2929+ </Card>
3030+</CardGrid>
···11+import type { StarlightPlugin } from '@astrojs/starlight/types'
22+33+export default function starlightSidebarTopicsDropdown(): StarlightPlugin {
44+ return {
55+ name: 'starlight-sidebar-topics-dropdown',
66+ hooks: {
77+ setup({ logger }) {
88+ /**
99+ * This is the entry point of your Starlight plugin.
1010+ * The `setup` hook is called when Starlight is initialized (during the Astro `astro:config:setup` integration
1111+ * hook).
1212+ * To learn more about the Starlight plugin API and all available options in this hook, check the Starlight
1313+ * plugins reference.
1414+ *
1515+ * @see https://starlight.astro.build/reference/plugins/
1616+ */
1717+ logger.info('Hello from the starlight-sidebar-topics-dropdown plugin!')
1818+ },
1919+ },
2020+ }
2121+}