{
"$type": "site.standard.document",
"content": {
"$type": "pub.leaflet.content",
"pages": [
{
"$type": "pub.leaflet.pages.linearDocument",
"blocks": [
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"facets": [
{
"features": [
{
"$type": "pub.leaflet.richtext.facet#link",
"uri": "https://github.com/hideoo/starlight-sidebar-topics"
}
],
"index": {
"byteEnd": 34,
"byteStart": 10
}
},
{
"features": [
{
"$type": "pub.leaflet.richtext.facet#link",
"uri": "https://github.com/trueberryless-org/starlight-sidebar-topics-dropdown"
}
],
"index": {
"byteEnd": 93,
"byteStart": 60
}
}
],
"plaintext": "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."
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.header",
"level": 2,
"plaintext": "Prerequisites"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"plaintext": "You will need to have an existing Starlight website."
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.header",
"level": 2,
"plaintext": "Install the packages"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"facets": [
{
"features": [
{
"$type": "pub.leaflet.richtext.facet#code"
}
],
"index": {
"byteEnd": 43,
"byteStart": 19
}
},
{
"features": [
{
"$type": "pub.leaflet.richtext.facet#code"
}
],
"index": {
"byteEnd": 97,
"byteStart": 64
}
}
],
"plaintext": "First, install the starlight-sidebar-topics plugin and also the starlight-sidebar-topics-dropdown component:"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.code",
"language": "shellscript",
"plaintext": "npm install starlight-sidebar-topics starlight-sidebar-topics-dropdown\n# pnpm add starlight-sidebar-topics starlight-sidebar-topics-dropdown\n# yarn add starlight-sidebar-topics starlight-sidebar-topics-dropdown",
"syntaxHighlightingTheme": "catppuccin-mocha"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"facets": [
{
"features": [
{
"$type": "pub.leaflet.richtext.facet#link",
"uri": "https://starlight-sidebar-topics.trueberryless.org/docs/getting-started/#installation"
}
],
"index": {
"byteEnd": 65,
"byteStart": 41
}
},
{
"features": [
{
"$type": "pub.leaflet.richtext.facet#link",
"uri": "https://starlight-sidebar-topics-dropdown.trueberryless.org/docs/getting-started/#installation"
}
],
"index": {
"byteEnd": 103,
"byteStart": 70
}
}
],
"plaintext": "Afterwards, follow the setup guides from Starlight Sidebar Topics and Starlight Sidebar Topics Dropdown."
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.header",
"level": 2,
"plaintext": "Modify the Sidebar component"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"facets": [
{
"features": [
{
"$type": "pub.leaflet.richtext.facet#code"
}
],
"index": {
"byteEnd": 180,
"byteStart": 152
}
}
],
"plaintext": "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."
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.code",
"language": "astro",
"plaintext": "---\nimport Default from '@astrojs/starlight/components/Sidebar.astro';\nimport Topics from 'starlight-sidebar-topics/components/Sidebar.astro';\nimport TopicsDropdown from 'starlight-sidebar-topics-dropdown/TopicsDropdown.astro';\n---\n\n<div class=\"topics\">\n <Topics/>\n</div>\n<div class=\"topics-dropdown\">\n <TopicsDropdown/>\n</div>\n<Default><slot /></Default>\n\n<style>\n /* Hide topics by default and show them on medium screens and larger */\n .topics {\n display: none;\n }\n\n @media (min-width: 800px) {\n .topics {\n display: block;\n }\n }\n\n /* Show topics dropdown on small screens and hide it on medium screens and larger */\n .topics-dropdown {\n display: block;\n }\n\n @media (min-width: 800px) {\n .topics-dropdown {\n display: none;\n }\n }\n</style>",
"syntaxHighlightingTheme": "catppuccin-mocha"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.header",
"level": 2,
"plaintext": "Result"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"plaintext": "If you follow these steps, your sidebar will look like this:"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.image",
"alt": "Final result with desktop view on the left and mobile view on the right",
"aspectRatio": {
"height": 352,
"width": 652
},
"image": {
"$type": "blob",
"ref": {
"$link": "bafkreicg4nyothzw735qba6hd5mtfkhmru56qzlbxvwe5cluyov7rpeavq"
},
"mimeType": "image/webp",
"size": 14890
}
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"facets": [
{
"features": [
{
"$type": "pub.leaflet.richtext.facet#link",
"uri": "https://stackblitz.com/edit/withastro-starlight-qgraahmp?file=astro.config.mjs"
}
],
"index": {
"byteEnd": 78,
"byteStart": 60
}
}
],
"plaintext": "You can find the complete source code of this guide in this StackBlitz example."
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.header",
"level": 2,
"plaintext": "Endless possibilities"
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"facets": [
{
"features": [
{
"$type": "pub.leaflet.richtext.facet#code"
}
],
"index": {
"byteEnd": 110,
"byteStart": 96
}
},
{
"features": [
{
"$type": "pub.leaflet.richtext.facet#code"
}
],
"index": {
"byteEnd": 128,
"byteStart": 115
}
}
],
"plaintext": "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."
}
},
{
"$type": "pub.leaflet.pages.linearDocument#block",
"block": {
"$type": "pub.leaflet.blocks.text",
"facets": [
{
"features": [
{
"$type": "pub.leaflet.richtext.facet#link",
"uri": "https://starlight-sidebar-topics.netlify.app/docs/guides/custom-topic-list/"
}
],
"index": {
"byteEnd": 282,
"byteStart": 248
}
}
],
"plaintext": "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."
}
}
],
"id": "019f31ae-5e68-7ee7-86d5-f785d7c7a285"
}
]
},
"coverImage": {
"$type": "blob",
"ref": {
"$link": "bafkreidwzxxzoarucqxg3puav4ieqhe3h3jhwrsvnqtxlhjklkfyxocgjy"
},
"mimeType": "image/webp",
"size": 623122
},
"description": "Learn how to combine a desktop list and mobile dropdown for your Starlight sidebar topics.",
"path": "/3mpvcsbo2tk2x",
"publishedAt": "2025-05-13T09:57:00.000Z",
"site": "at://did:plc:pbjvqaziagcyv2vqodldn5op/site.standard.publication/3mpts4vzcqc2e",
"tags": [
"starlight",
"css",
"plugins"
],
"title": "Starlight Sidebar Topics Dropdown and List together"
}