Skip to content
Starlight Fullview Mode

Configuration

Switch to Zen Mode

The plugin accepts the following configuration options:

leftSidebarEnabled

Section titled “leftSidebarEnabled”
  • Type: boolean
  • Default: true
  • Description: Controls whether the left sidebar can be toggled between collapsed and expanded states.

rightSidebarEnabled

Section titled “rightSidebarEnabled”
  • Type: boolean
  • Default: true
  • Description: Controls whether the right sidebar (table of contents) can be toggled between collapsed and expanded states.

leftSidebarExpandedWidth

Section titled “leftSidebarExpandedWidth”
  • Type: string | null
  • Default: null (uses default theme width)
  • Description: Custom CSS width value for the left sidebar when expanded (e.g., "250px", "20%").

rightSidebarExpandedWidth

Section titled “rightSidebarExpandedWidth”
  • Type: string | null
  • Default: null (uses default theme width)
  • Description: Custom CSS width value for the right sidebar when expanded.

leftSidebarCollapsedWidth

Section titled “leftSidebarCollapsedWidth”
  • Type: string
  • Default: "50px"
  • Description: Custom CSS width value for the left sidebar when collapsed.

rightSidebarCollapsedWidth

Section titled “rightSidebarCollapsedWidth”
  • Type: string
  • Default: "50px"
  • Description: Custom CSS width value for the right sidebar when collapsed.

Examples

Section titled “Examples”

Enable the left sidebar and disable the right sidebar:

Section titled “Enable the left sidebar and disable the right sidebar:”
starlightFullViewMode({
  leftSidebarEnabled: true,
  rightSidebarEnabled: false
})

Enable the right sidebar and disable the left sidebar:

Section titled “Enable the right sidebar and disable the left sidebar:”
starlightFullViewMode({
  leftSidebarEnabled: false,
  rightSidebarEnabled: true
})

Collapse the sidebars from view

Section titled “Collapse the sidebars from view”
starlightFullViewMode({
  // to have the sidebars appear until the user collapses
  leftSidebarCollapsedWidth: "0px",
  rightSidebarCollapsedWidth: "0px",
  // to never let the sidebars appear
  leftSidebarExpandedWidth: "0px",
  rightSidebarExpandedWidth: "0px",
})

Combine with other plugins:

Section titled “Combine with other plugins:”
pnpm add starlight-view-modes

TableofContents.astro

---
import StarlightFullviewModeTableOfContents from 'starlight-fullview-mode/overrides/TableOfContents.astro'
import StarlightViewModesTableOfContents from 'starlight-view-modes/components/TableOfContents.astro'
---


<StarlightFullviewModeTableOfContents><slot /></StarlightFullviewModeTableOfContents>
<StarlightViewModesTableOfContents />

astro.config.mjs

import starlight from '@astrojs/starlight'
import { defineConfig } from 'astro/config';
import starlightFullViewMode from 'starlight-fullview-mode';
import starlightViewModes from 'starlight-view-modes';
...


export default defineConfig({
  ...
  integrations: [
    starlight({
      ...
     components: {
        TableOfContents: "./src/components/TableOfContents.astro",
      },
      plugins: [
        starlightViewModes(),
        starlightFullViewMode(),
        ...
      ]
      ...
    }),
  ]
})