Skip to main content

Sidebar

A composable sidebar with expanded, icon and offcanvas states.

Loading preview…
Live C++Source and licences
#include <QApplication>
#include <QFile>
#include <QHBoxLayout>
#include <QLabel>
#include <QPainter>
#include <QStandardItemModel>
#include <QUrl>
#include <QVBoxLayout>
#include <array>
#ifdef SHADCN_GALLERY_MEDIA
#include <shadcn/media.hpp>
#endif
#include <shadcn/shadcn.hpp>

QWidget* example(QWidget* parent = nullptr) {
    using namespace shadcn;
    auto* canvas = new QWidget(parent);
    canvas->setAutoFillBackground(true);
    auto* outer = new QHBoxLayout(canvas);
    outer->setContentsMargins(32, 32, 32, 32);
    auto* host = new QWidget(canvas);
    auto* layout = new QVBoxLayout(host);
    layout->setContentsMargins(0, 0, 0, 0);
    layout->setSpacing(16);
    outer->addStretch();
    outer->addWidget(host, 0, Qt::AlignCenter);
    outer->addStretch();
    auto* provider = new SidebarProvider(host);
    provider->setFixedSize(500, 240);
    auto* sidebar = new Sidebar(provider);
    sidebar->setExpandedWidth(180);
    sidebar->header().addWidget(new Label("Workspace", sidebar));
    (void)sidebar->addMenuButton("Home", true);
    (void)sidebar->addMenuButton("Inbox");
    (void)sidebar->addMenuButton("Calendar");
    // A footer item, so the rail shows both places a control can live. The
    // footer is for a control that acts on the whole application; the navigation
    // above is for the pages.
    (void)sidebar->addFooterMenuButton("Settings");
    provider->addSidebar(*sidebar);
    provider->content().addWidget(new SidebarTrigger(provider), 0, Qt::AlignLeft);
    provider->content().addWidget(new Label("Your workspace", provider));
    provider->content().addStretch();
    layout->addWidget(provider);
    return canvas;
}

Installation​

add_subdirectory(shadcn-cpp)
target_link_libraries(app PRIVATE shadcn::widgets)

Usage​

#include <shadcn/navigation.hpp>

shadcn::SidebarProvider provider(parent);
auto& sidebar = *new shadcn::Sidebar(&provider);
auto& inset = *new shadcn::SidebarInset(&provider);
provider.addSidebar(sidebar);
sidebar.addMenuButton("Overview", true);
provider.content().addWidget(&inset);

API​

setCollapsible, setVariant, setOpen and toggle control the sidebar. The provider supplies the shortcut and content layout.

Variations​

Choose sidebar, floating or inset variants and none, offcanvas or icon collapse behavior.

Keyboard and accessibility​

Qt supplies native focus, keyboard interaction and accessible object roles. Give the component a visible label or an accessible name when its text alone does not explain the action.

Ownership​

The parent widget owns the component. Child widgets created through a component layout follow Qt parent ownership. References returned by helper methods are borrowed.