Svelte Sidebar

Sidebar navigation component written in svelte and compiled to an ES module of 8kb.

Check it out in the playground.

What it is

This sidebar navigation for web application replicates the experience of browsing the file tree in a code editor. The benefit is that the user can understand the application's information architecture (IA) at first glance, and can quickly jump between different hierarchy levels. The UI pattern goes well with complex web applications with a lot of nested routes, especially for applications where the user can create data entries (e.g. where multiple users create projects, each of which is composed of multiple screens).

Features

• Usable in any web-app where the navigation routes are known / computable, as the sidebar is an ES module.
• Semantic, accessible DOM. Navigation is entirely possible with the keyboard.
• The navigation hierarchy can be nested as deeply as required. Navigation links with sub-links are collapsible groups.
• Automatically un-collapses the active part of the navigation hierarchy and scrolls it into the viewport. Parent navigation items of the active navigation item are also highlighted compared to inactive navigation items.
• Every navigation link can be disabled.
• Just enough configuration possibilities for re-usability:
  • By default, the regular browser navigation occurs when the user clicks on a link (or presses Enter). A function can be passed as property to interrupt the regular navigation to handle navigation on the client side.
  • Themeable: Colors (including hover styles), font sizing, and the minimum and maximum width (depending on the length of the names of navigation links).
• h(n) performance when matching the active route in the navigation hierarchy, where n signifies the count of navigation links.

Installation

• Without installation from skypack:

  import Sidebar from 'https://cdn.skypack.dev/svelte_sidebar'
  

• Yarn package manager: yarn add svelte_sidebar

• NPM package manager: npm install --save svelte_sidebar

Usage

On any web site / app as ES module

<!-- index.html -->
<div id="app"></div>

<script type="module">
import Sidebar from 'https://cdn.skypack.dev/svelte_sidebar'

  const props = {
    routes: [
        { "name": "Playground", "route": "/" },
        { "name": "Readme", "route": "/readme", "childRoutes": [
            { "name": "What it is", "route": "/readme#what-it-is" }
            ]
        }
    ],
    activeUrl: '/'
  }

  new Sidebar({target: document.querySelector('#app'), props})
</script>

In a svelte web app

// App.svelte
import Sidebar from 'svelte_sidebar' // or from skypack

const props = {...}

<Sidebar {...props} />

Component properties

The playground allows to play around with every property. It shows the sidebar on the left, and the component usage on the right. It's therefore the quickest way to find out how to use the component, and to see whether it covers your needs.

The routes array

As specified above, routes is an array of navigation route objects. Every one of those objects can have the attributes shown below (others are ignored):

{
    name: 'Products',
    route: '/products',
    disabled: true, /* optional */
    childRoutes: [] /* optional */
}

Following the description of a route object's attributes:

The theme property

The theme property object takes the following attributes with matching CSS values:

The property names are CSS custom properties attached to the sidebar element.

Slots

The sidebar can also be passed children that are placed in pre-defined slots in the sidebar. There's a slot names header that is rendered above all navigation links (e.g. for company name and logo), and one below all navigation links called footer. On the playground, this slot is used to render the theme switcher.

License

The code is licensed under MIT, see LICENSE.

Contribution

This code-base is meant to be a one-time effort. I don't plan to extend it, unless there's actual usage and user feedback.

Feel free to report issues, and/or to open PRs. I'll typically respond within a business day.

If you want to contribute, you are welcome to pick one of the open issues.