Svelte Sidebar

Playground

Customise the sidebar on the left with the form below. The props passed to the component can be seen on the right. Changes are displayed live.

Color

Background Color of Sidebar: Background Color of Active Links: Color of Link Text: Hover Color of Link Text:

Opacity

Opacity of Disabled Links: Opacity of Links Which Are Not Part of the Active Route:

Sizing

Font Size in rem: Sidebar Maximum Width in px: Sidebar Minimum Width in px:

Routes Navigation Structure

Result < Sidebar

routes =" [ { "name": "Playground", "route": "/" }, { "name": "Readme", "route": "/readme", "childRoutes": [ { "name": "What it is", "route": "/readme#what-it-is" }, { "name": "Features", "route": "/readme#features" }, { "name": "Component props", "route": "/readme#component-properties", "childRoutes": [ { "name": "The routes array", "route": "/readme#the-routes-array" }, { "name": "The theme property", "route": "/readme#the-theme-property" } ] }, { "name": "Slots", "route": "/readme#slots" }, { "name": "License", "route": "/readme#license" }, { "name": "Contribution", "route": "/readme#contribution" } ] }, { "name": "Example group", "route": "/another-link-group", "childRoutes": [ { "name": "A not disabled link", "route": "/another-link-group/enabled" }, { "name": "A disabled link", "route": "/another-link-group/disabled", "disabled": true } ], "collapseTree": true }, { "name": "Disabled example group", "route": "/disabled", "disabled": true, "childRoutes": [ { "name": "Sub-link 1", "route": "/disabled/sub-link-1" }, { "name": "Sub-link 2", "route": "/disabled/sub-link-2" } ] } ] "

open =" true "

theme =" { "backgroundColor_linkActive": "#F4442E", "backgroundColor_nav": "#003649", "color_link": "#F7F7F2", "color_linkHover": "#FCA311", "fontSize": "1rem", "maxWidth_nav": "20vw", "minWidth_nav": "320px", "opacity_linkDisabled": "0.5", "opacity_linkInactive": "0.75" } "

activeUrl =" / "