Sidebar

Display vertical navigation options aside the main content

Use the Sidebar component to provide additional navigation options and content to your users in a vertical layout next to your main content. Use the Sidebar component along with a Sheet component to create toggleable sidebars.

Preview

---
import { Sidebar } from 'webcoreui/astro'

const groups = [{
    items: [
        { name: 'Home', href: '#' },
        { name: 'Docs', href: '#' },
        { name: 'Component', href: '#' }
    ]
}]
---

<Sidebar groups={groups} />

<script>
    import { Sidebar } from 'webcoreui/svelte'

    const groups = [{
        items: [
            { name: 'Home', href: '#' },
            { name: 'Docs', href: '#' },
            { name: 'Component', href: '#' }
        ]
    }]
</script>

<Sidebar groups={groups} />

import React from 'react'
import { Sidebar } from 'webcoreui/react'

const groups = [{
    items: [
        { name: 'Home', href: '#' },
        { name: 'Docs', href: '#' },
        { name: 'Component', href: '#' }
    ]
}]

const Component = () => (
    <Sidebar groups={groups} />
)

export default Component

The Sidebar component expects a single groups prop that specifies the group of links. Each group must have an items property that specifies the link in the format of objects with a name and href property.

Groups

To create distinct groups, specify a title property along with the items property for your groups:

<Sidebar groups={[
    {
        title: 'SITEMAP',
        items: [...]
    },
    {
        title: 'THEMES',
        items: [...]
    }
]}>

Badges

Sidebar items can be created with extra text to make them highlighted or provide additional context. Use the badge property on an item to specify additional text, and the badgeTheme property to change the style of the badge. The badgeTheme property can take the values of button themes:

<Sidebar groups={[
    {
        title: 'SITEMAP',
        items: [
            { name: 'Home', href: '#' },
            { name: 'Docs', href: '#', badge: 'updated', badgeTheme: 'info' },
            { name: 'Component', href: '#', badge: 'new components' }
        ]
    },
    {
        title: 'THEMES',
        items: [...]
    }
]}>

By default, badges in sidebars will be created with the success theme.

Icons

Icons can also be assigned to sidebar items. To add an icon to a sidebar item, specify the icon property:

<Sidebar groups={[
    {
        title: 'SITEMAP',
        items: [
            { name: 'Home', href: '#', icon: '<svg ... />' },
            { name: 'Docs', href: '#', icon: 'file', badge: 'updated', badgeTheme: 'info' },
            { name: 'Component', icon: 'components', active: true, badge: 'new components' }
        ]
    },
    {
        title: 'THEMES',
        items: [...]
    }
]}>

The icon can be an imported SVG string. You can import icons from webcoreui/icons. For Astro components, you can also reference the icon type. For available icons in Webcore, see the documentation of the Icon component.

Extra Content

If you need to display extra items in your sidebar, you can pass your elements as the children to the component:

<Sidebar groups={itemGroupsWithIcons}>
    <Alert theme="info" title="Note">...</Alert>
</Sidebar>

See the documentation of the Alert component to see how to use it.

The Sidebar component can be combined with the Sheet component to create toggleable sidebars:

<Button className="button">Open Sidebar</Button>
<Sheet className="sidebar-sheet" position="left">
    <Sidebar groups={[...]} />
</Sheet>

<style>
    .sidebar-sheet {
        width: 300px;
    }
</style>

Visit the documentation of the Sheet component to learn more about how to work with sheets in Webcore.

API

type SidebarProps = {
    groups: {
        title?: string
        items: {
            name: string
            href: string
            target?: '_self'
                | '_blank'
                | '_parent'
                | '_top'
                | '_unfencedTop'
            active?: boolean
            icon?: string
            badge?: string
            badgeTheme?: 'secondary'
                | 'outline'
                | 'flat'
                | 'info'
                | 'success'
                | 'warning'
                | 'alert'
        }[]
    }[]
    className?: string
}

Prop	Purpose
`groups`	Sets the item groups for the sidebar.
`groups.title`	Sets the title of the item group.
`groups.items.name`	Sets the name of the anchor.
`groups.items.href`	Sets the link of the anchor.
`groups.items.target`	Sets the target of the anchor.
`groups.items.active`	Sets the anchor as active. Use for the current page.
`groups.items.icon`	Sets an icon in front of the anchor's name.
`groups.items.badge`	Sets additional text after the anchor.
`groups.items.badgeTheme`	Sets the theme of the additional text.
`className`	Pass additional CSS classes for the sidebar.

<- Sheet Skeleton ->

Request improvement for this page

Sidebar

Groups

Badges

Icons

Extra Content

Toggleable Sidebar

API