astro starlight; how to add external links in sidebar?
#Starlight, external links in sidebar
umbral finch
icy irisBOT
Hi @umbral finch. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
To add external links to the Starlight sidebar, use a sidebar item with label and link in your astro.config.mjs Starlight integration config.
Example:
import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';
export default defineConfig({
integrations: [
starlight({
sidebar: [
// External link
{ label: 'NASA', link: '<https://www.nasa.gov/'> },
// Non-docs internal page
{ label: 'Meteor Store', link: '/shop/' },
],
}),
],
});
This will render those entries as sidebar links, with link pointing to the external URL (or any non-docs URL). [Sidebar guide]
You can also add custom HTML attributes (e.g. open in new tab) via attrs:
starlight({
sidebar: [
{
label: 'NASA',
link: '<https://www.nasa.gov/',>
attrs: { target: '_blank', rel: 'noreferrer' },
},
],
});