sidebar

package
v0.0.7 Latest Latest
Warning

This package is not in the latest version of its module.

 Go to latest Published: Jan 17, 2026 License: MIT Imports: 6 Imported by: 0

README

Sidebar Component

A collapsible sidebar navigation component with provider pattern integration for state management. Fully responsive with mobile support, animations, and customizable styling.

Features

  • ✅ Provider Pattern: Uses ForgeUI's provider pattern for state management
  • ✅ Responsive: Adapts to mobile and desktop with different behaviors
  • ✅ Collapsible: Can be collapsed to icon-only mode on desktop
  • ✅ Mobile Drawer: Full drawer experience on mobile with backdrop
  • ✅ Animations: Smooth transitions and animations
  • ✅ Nested Menus: Support for submenus and collapsible groups
  • ✅ Customizable: Extensive options for styling and behavior
  • ✅ Accessible: ARIA labels and keyboard navigation
  • ✅ Keyboard Shortcuts: Cmd/Ctrl+B to toggle sidebar (customizable)
  • ✅ State Persistence: Remembers collapsed state across sessions
  • ✅ Multiple Variants: Sidebar, floating, and inset styles
  • ✅ Collapsible Modes: Offcanvas, icon-only, or non-collapsible
  • ✅ Tooltips: Auto-show tooltips when sidebar is collapsed
  • ✅ Focus Management: Comprehensive focus rings and keyboard navigation
  • ✅ Menu Variants: Default and outline button styles
  • ✅ Menu Sizes: Small, default, and large button sizes

Basic Usage

import "github.com/xraph/forgeui/components/sidebar"

sidebar.Sidebar(
    sidebar.SidebarHeader(
        g.Text("My App"),
    ),
    sidebar.SidebarContent(
        sidebar.SidebarGroup(
            sidebar.SidebarGroupLabel("Navigation"),
            sidebar.SidebarMenu(
                sidebar.SidebarMenuItem(
                    sidebar.SidebarMenuButton(
                        "Dashboard",
                        sidebar.WithMenuHref("/dashboard"),
                        sidebar.WithMenuIcon(icons.LayoutDashboard()),
                        sidebar.WithMenuActive(),
                    ),
                ),
            ),
        ),
    ),
    sidebar.SidebarFooter(
        g.Text("© 2024"),
    ),
    sidebar.SidebarToggle(),
)

Provider Integration

The sidebar uses ForgeUI's provider pattern to manage state. This allows child components and even components outside the sidebar to access its state without prop drilling.

Sidebar State

The sidebar provider exposes the following state:

  • collapsed (bool): Whether the sidebar is collapsed (desktop only)
  • mobileOpen (bool): Whether the sidebar is open on mobile
  • collapsible (bool): Whether the sidebar can be collapsed
  • isMobile (bool): Whether the viewport is mobile-sized
Sidebar Methods

The sidebar provider exposes these methods:

  • toggle(): Toggle collapsed state
  • openMobile(): Open sidebar on mobile
  • closeMobile(): Close sidebar on mobile
  • setCollapsed(value): Set collapsed state directly
Accessing Sidebar State
// In a component that needs to react to sidebar state
html.Div(
    g.Attr(":class", `{
        'ml-64': `+primitives.ProviderValue("sidebar", "!isMobile && !collapsed")+`,
        'ml-16': `+primitives.ProviderValue("sidebar", "!isMobile && collapsed")+`,
        'ml-0': `+primitives.ProviderValue("sidebar", "isMobile")+`
    }`),
    // Your content
)

Components

Sidebar

Main sidebar container with provider integration.

sidebar.Sidebar(children...)
sidebar.SidebarWithOptions(options, children...)

Options:

  • WithDefaultCollapsed(bool): Set initial collapsed state
  • WithCollapsible(bool): Allow sidebar to be collapsed
  • WithSide(forgeui.Side): Position (left or right)
  • WithSidebarClass(string): Custom CSS classes
  • WithSidebarAttrs(...g.Node): Custom attributes
  • WithVariant(SidebarVariant): Visual variant (sidebar, floating, inset)
  • WithCollapsibleMode(SidebarCollapsibleMode): Collapse behavior (offcanvas, icon, none)
  • WithKeyboardShortcut(string): Set keyboard shortcut key (default: "b")
  • WithKeyboardShortcutEnabled(bool): Enable/disable keyboard shortcuts
  • WithPersistState(bool): Enable state persistence
  • WithStorageKey(string): Custom storage key for persistence
  • WithStorageType(string): Storage type ("localStorage" or "sessionStorage")
SidebarHeader

Header section of the sidebar (typically for logo/branding).

sidebar.SidebarHeader(
    html.Img(g.Attr("src", "/logo.svg")),
    g.Text("My App"),
)
SidebarContent

Main content area containing navigation items.

sidebar.SidebarContent(
    // Navigation groups and menus
)
SidebarFooter

Footer section of the sidebar (typically for user profile or settings).

sidebar.SidebarFooter(
    // Footer content
)
SidebarToggle

Toggle button for collapsing/expanding the sidebar.

sidebar.SidebarToggle()
SidebarGroup

Groups related menu items together.

sidebar.SidebarGroup(
    sidebar.SidebarGroupLabel("Settings"),
    sidebar.SidebarMenu(...),
)
SidebarGroupCollapsible

Collapsible group with animation.

sidebar.SidebarGroupCollapsible(
    []sidebar.SidebarGroupOption{
        sidebar.WithGroupKey("projects"),
        sidebar.WithGroupDefaultOpen(true),
    },
    sidebar.SidebarGroupLabelCollapsible("projects", "Projects", icon),
    sidebar.SidebarGroupContent("projects",
        sidebar.SidebarMenu(...),
    ),
)
SidebarMenu

Container for menu items.

sidebar.SidebarMenu(
    sidebar.SidebarMenuItem(...),
    sidebar.SidebarMenuItem(...),
)
SidebarMenuItem

Individual menu item container.

sidebar.SidebarMenuItem(
    sidebar.SidebarMenuButton(...),
)
SidebarMenuButton

Menu button/link with icon, label, and badge support.

sidebar.SidebarMenuButton(
    "Dashboard",
    sidebar.WithMenuHref("/dashboard"),
    sidebar.WithMenuIcon(icons.LayoutDashboard()),
    sidebar.WithMenuActive(),
    sidebar.WithMenuBadge(sidebar.SidebarMenuBadge("5")),
)

Options:

  • WithMenuHref(string): Link URL
  • WithMenuActive(): Mark as active
  • WithMenuIcon(g.Node): Add icon
  • WithMenuBadge(g.Node): Add badge
  • WithMenuTooltip(string): Tooltip text
  • WithMenuAsButton(): Render as button instead of link
  • WithMenuClass(string): Custom classes
  • WithMenuAttrs(...g.Node): Custom attributes
SidebarMenuSub

Submenu container for nested items.

sidebar.SidebarMenuSub(
    sidebar.SidebarMenuSubItem(
        sidebar.SidebarMenuSubButton("Overview", "/overview", false),
    ),
)

Layout Components

SidebarLayout

Root layout container.

sidebar.SidebarLayout(
    sidebar.Sidebar(...),
    html.Main(...),
)
SidebarLayoutContent

Content area that adjusts margins based on sidebar state.

sidebar.SidebarLayoutContent(
    // Your page content
)
SidebarInset

Alternative layout with inset content area.

sidebar.SidebarInset(
    sidebar.SidebarInsetHeader(
        sidebar.SidebarTrigger(),
        breadcrumb.Breadcrumb(...),
    ),
    html.Main(...),
)

Complete Example

package main

import (
    "github.com/xraph/forgeui/components/sidebar"
    "github.com/xraph/forgeui/icons"
    g "maragu.dev/gomponents"
    "maragu.dev/gomponents/html"
)

func DashboardLayout() g.Node {
    return sidebar.SidebarLayout(
        // Sidebar
        sidebar.SidebarWithOptions(
            []sidebar.SidebarOption{
                sidebar.WithDefaultCollapsed(false),
                sidebar.WithCollapsible(true),
            },
            // Header
            sidebar.SidebarHeader(
                html.Div(
                    html.Class("flex items-center gap-2"),
                    html.Img(
                        g.Attr("src", "/logo.svg"),
                        html.Class("h-8 w-8"),
                    ),
                    html.Span(
                        html.Class("font-bold text-lg"),
                        g.Text("My App"),
                    ),
                ),
            ),
            
            // Content
            sidebar.SidebarContent(
                // Main navigation
                sidebar.SidebarGroup(
                    sidebar.SidebarGroupLabel("Main"),
                    sidebar.SidebarMenu(
                        sidebar.SidebarMenuItem(
                            sidebar.SidebarMenuButton(
                                "Dashboard",
                                sidebar.WithMenuHref("/dashboard"),
                                sidebar.WithMenuIcon(icons.LayoutDashboard()),
                                sidebar.WithMenuActive(),
                            ),
                        ),
                        sidebar.SidebarMenuItem(
                            sidebar.SidebarMenuButton(
                                "Analytics",
                                sidebar.WithMenuHref("/analytics"),
                                sidebar.WithMenuIcon(icons.Activity()),
                            ),
                        ),
                        sidebar.SidebarMenuItem(
                            sidebar.SidebarMenuButton(
                                "Messages",
                                sidebar.WithMenuHref("/messages"),
                                sidebar.WithMenuIcon(icons.Mail()),
                                sidebar.WithMenuBadge(sidebar.SidebarMenuBadge("12")),
                            ),
                        ),
                    ),
                ),
                
                // Collapsible projects section
                sidebar.SidebarGroupCollapsible(
                    []sidebar.SidebarGroupOption{
                        sidebar.WithGroupKey("projects"),
                        sidebar.WithGroupDefaultOpen(true),
                    },
                    sidebar.SidebarGroupLabelCollapsible(
                        "projects",
                        "Projects",
                        icons.FolderKanban(),
                    ),
                    sidebar.SidebarGroupContent("projects",
                        sidebar.SidebarMenu(
                            sidebar.SidebarMenuItem(
                                sidebar.SidebarMenuButton(
                                    "Website Redesign",
                                    sidebar.WithMenuHref("/projects/website"),
                                    sidebar.WithMenuIcon(icons.FolderKanban()),
                                ),
                                // Submenu
                                sidebar.SidebarMenuSub(
                                    sidebar.SidebarMenuSubItem(
                                        sidebar.SidebarMenuSubButton(
                                            "Overview",
                                            "/projects/website/overview",
                                            false,
                                        ),
                                    ),
                                    sidebar.SidebarMenuSubItem(
                                        sidebar.SidebarMenuSubButton(
                                            "Tasks",
                                            "/projects/website/tasks",
                                            true,
                                        ),
                                    ),
                                ),
                            ),
                        ),
                    ),
                ),
                
                // Settings
                sidebar.SidebarGroup(
                    sidebar.SidebarGroupLabel("Settings"),
                    sidebar.SidebarMenu(
                        sidebar.SidebarMenuItem(
                            sidebar.SidebarMenuButton(
                                "Account",
                                sidebar.WithMenuHref("/settings/account"),
                                sidebar.WithMenuIcon(icons.User()),
                            ),
                        ),
                    ),
                ),
            ),
            
            // Footer
            sidebar.SidebarFooter(
                html.Div(
                    html.Class("flex items-center gap-2"),
                    html.Img(
                        g.Attr("src", "/avatar.jpg"),
                        html.Class("h-8 w-8 rounded-full"),
                    ),
                    html.Span(g.Text("John Doe")),
                ),
            ),
            
            // Toggle button
            sidebar.SidebarToggle(),
        ),
        
        // Main content
        sidebar.SidebarInset(
            sidebar.SidebarInsetHeader(
                sidebar.SidebarTrigger(),
                html.H1(g.Text("Dashboard")),
            ),
            html.Main(
                html.Class("p-6"),
                // Your page content
            ),
        ),
    )
}

Styling

The sidebar uses Tailwind CSS with custom theme colors. Make sure your theme includes:

:root {
  --sidebar: 0 0% 98%;
  --sidebar-foreground: 240 5.3% 26.1%;
  --sidebar-primary: 240 5.9% 10%;
  --sidebar-primary-foreground: 0 0% 98%;
  --sidebar-accent: 240 4.8% 95.9%;
  --sidebar-accent-foreground: 240 5.9% 10%;
  --sidebar-border: 220 13% 91%;
}

.dark {
  --sidebar: 240 5.9% 10%;
  --sidebar-foreground: 240 4.8% 95.9%;
  --sidebar-primary: 0 0% 98%;
  --sidebar-primary-foreground: 240 5.9% 10%;
  --sidebar-accent: 240 3.7% 15.9%;
  --sidebar-accent-foreground: 240 4.8% 95.9%;
  --sidebar-border: 240 3.7% 15.9%;
}

Migration from Menu Package

If you're migrating from the old components/menu sidebar:

Before
import "github.com/xraph/forgeui/components/menu"

menu.Sidebar(...)
menu.SidebarHeader(...)
After
import "github.com/xraph/forgeui/components/sidebar"

sidebar.Sidebar(...)
sidebar.SidebarHeader(...)

Key Changes:

  1. Import path changed from components/menu to components/sidebar
  2. All functions prefixed with menu. now use sidebar.
  3. State management moved from Alpine stores to provider pattern
  4. Backward compatibility maintained via Alpine store sync

Backward Compatibility

The sidebar maintains backward compatibility with Alpine stores. If you have code that accesses $store.sidebar, it will continue to work:

// Still works
$store.sidebar.collapsed
$store.sidebar.mobileOpen

// But prefer the new provider pattern
$el.closest('[data-provider="sidebar"]').__x.$data.collapsed

Enhanced Features

Keyboard Shortcuts

The sidebar supports keyboard shortcuts for quick toggling. By default, pressing Cmd+B (Mac) or Ctrl+B (Windows/Linux) will toggle the sidebar.

// Default - Cmd/Ctrl+B
sidebar.Sidebar(...)

// Custom key
sidebar.SidebarWithOptions(
    []sidebar.SidebarOption{
        sidebar.WithKeyboardShortcut("k"), // Cmd/Ctrl+K
    },
    // children...
)

// Disable keyboard shortcuts
sidebar.SidebarWithOptions(
    []sidebar.SidebarOption{
        sidebar.WithKeyboardShortcutEnabled(false),
    },
    // children...
)
State Persistence

The sidebar can remember its collapsed state across browser sessions using localStorage or sessionStorage.

// Enable persistence with default settings (localStorage)
sidebar.SidebarWithOptions(
    []sidebar.SidebarOption{
        sidebar.WithPersistState(true),
    },
    // children...
)

// Custom storage key and type
sidebar.SidebarWithOptions(
    []sidebar.SidebarOption{
        sidebar.WithPersistState(true),
        sidebar.WithStorageKey("my_app_sidebar"),
        sidebar.WithStorageType("sessionStorage"),
    },
    // children...
)
Sidebar Variants

Choose from different visual styles for your sidebar:

Sidebar Variant (Default)

  • Standard sidebar flush with viewport edge
  • No rounded corners or shadows

Floating Variant

  • Rounded corners and shadow
  • Margin from viewport edges
  • Modern, card-like appearance

Inset Variant

  • Similar to floating but more subtle
  • Works well with inset content layouts
sidebar.SidebarWithOptions(
    []sidebar.SidebarOption{
        sidebar.WithVariant(sidebar.SidebarVariantFloating),
    },
    // children...
)
Collapsible Modes

Control how the sidebar collapses:

Offcanvas Mode (Default)

  • Slides completely off screen when collapsed
  • Similar to mobile drawer behavior

Icon Mode

  • Shrinks to icon-only width (64px)
  • Labels hidden, only icons visible
  • Tooltips appear on hover

None Mode

  • Sidebar cannot be collapsed
  • Toggle button hidden
sidebar.SidebarWithOptions(
    []sidebar.SidebarOption{
        sidebar.WithCollapsibleMode(sidebar.CollapsibleIcon),
    },
    // children...
)
Tooltips

Tooltips automatically appear when hovering over menu items in collapsed/icon mode:

sidebar.SidebarMenuButton(
    "Dashboard",
    sidebar.WithMenuHref("/dashboard"),
    sidebar.WithMenuIcon(icons.LayoutDashboard()),
    sidebar.WithMenuTooltip("Go to Dashboard"), // Shows when collapsed
)

// Or wrap any element with a tooltip
sidebar.SidebarMenuTooltip(
    "Dashboard",
    sidebar.SidebarMenuButton(...),
)
Menu Button Variants

Choose from different button styles:

// Default variant
sidebar.SidebarMenuButton(
    "Dashboard",
    sidebar.WithMenuVariant(sidebar.MenuButtonDefault),
)

// Outline variant (with border and shadow)
sidebar.SidebarMenuButton(
    "Settings",
    sidebar.WithMenuVariant(sidebar.MenuButtonOutline),
)
Menu Button Sizes

Adjust button sizes for different hierarchy levels:

// Small (28px height)
sidebar.SidebarMenuButton(
    "Sub Item",
    sidebar.WithMenuSize(sidebar.MenuButtonSizeSmall),
)

// Default (32px height)
sidebar.SidebarMenuButton(
    "Main Item",
    sidebar.WithMenuSize(sidebar.MenuButtonSizeDefault),
)

// Large (48px height)
sidebar.SidebarMenuButton(
    "Featured",
    sidebar.WithMenuSize(sidebar.MenuButtonSizeLarge),
)
Additional Components

SidebarInput - Search/filter input for sidebar:

sidebar.SidebarInput("Search...", "sidebar-search")

SidebarSeparator - Visual separator:

sidebar.SidebarSeparator()
Complete Example with All Features
sidebar.SidebarWithOptions(
    []sidebar.SidebarOption{
        // Visual style
        sidebar.WithVariant(sidebar.SidebarVariantFloating),
        sidebar.WithCollapsibleMode(sidebar.CollapsibleIcon),
        
        // Behavior
        sidebar.WithDefaultCollapsed(false),
        sidebar.WithCollapsible(true),
        sidebar.WithSide(forgeui.SideLeft),
        
        // Keyboard shortcuts
        sidebar.WithKeyboardShortcut("b"),
        sidebar.WithKeyboardShortcutEnabled(true),
        
        // State persistence
        sidebar.WithPersistState(true),
        sidebar.WithStorageKey("myapp_sidebar"),
        sidebar.WithStorageType("localStorage"),
    },
    sidebar.SidebarHeader(
        html.Img(g.Attr("src", "/logo.svg")),
        g.Text("My App"),
    ),
    sidebar.SidebarContent(
        // Search input
        sidebar.SidebarInput("Search...", "search"),
        sidebar.SidebarSeparator(),
        
        // Main navigation
        sidebar.SidebarGroup(
            sidebar.SidebarGroupLabel("Main"),
            sidebar.SidebarMenu(
                sidebar.SidebarMenuItem(
                    sidebar.SidebarMenuButton(
                        "Dashboard",
                        sidebar.WithMenuHref("/dashboard"),
                        sidebar.WithMenuIcon(icons.LayoutDashboard()),
                        sidebar.WithMenuActive(),
                        sidebar.WithMenuTooltip("Go to Dashboard"),
                        sidebar.WithMenuVariant(sidebar.MenuButtonDefault),
                        sidebar.WithMenuSize(sidebar.MenuButtonSizeDefault),
                    ),
                ),
            ),
        ),
        
        sidebar.SidebarSeparator(),
        
        // Settings
        sidebar.SidebarGroup(
            sidebar.SidebarGroupLabel("Settings"),
            sidebar.SidebarMenu(
                sidebar.SidebarMenuItem(
                    sidebar.SidebarMenuButton(
                        "Preferences",
                        sidebar.WithMenuHref("/settings"),
                        sidebar.WithMenuIcon(icons.Settings()),
                        sidebar.WithMenuTooltip("Configure Settings"),
                        sidebar.WithMenuVariant(sidebar.MenuButtonOutline),
                        sidebar.WithMenuSize(sidebar.MenuButtonSizeSmall),
                    ),
                ),
            ),
        ),
    ),
    sidebar.SidebarFooter(
        g.Text("© 2024 My App"),
    ),
    sidebar.SidebarToggle(),
)

Accessibility

The sidebar includes comprehensive accessibility features:

ARIA Attributes
  • role="complementary" on sidebar container
  • role="menuitem" on menu buttons
  • role="navigation" on menu containers
  • role="separator" on separators
  • role="tooltip" on tooltips
  • aria-label on all interactive elements
  • aria-expanded on collapsible elements
  • aria-current="page" on active menu items
  • aria-hidden on decorative elements
Keyboard Navigation
  • Tab: Navigate through menu items
  • Enter/Space: Activate menu items
  • Arrow Up/Down: Navigate within menu
  • Home: Jump to first menu item
  • End: Jump to last menu item
  • Cmd/Ctrl+B: Toggle sidebar (customizable)
Focus Management
  • Visible focus rings on all interactive elements
  • Focus trapped in mobile drawer
  • Focus restored after sidebar toggle
  • Keyboard-accessible tooltips
Screen Reader Support
  • Live region announces sidebar state changes
  • Descriptive labels on all buttons
  • Semantic HTML structure
  • Proper heading hierarchy

Browser Support

  • Modern browsers (Chrome, Firefox, Safari, Edge)
  • Requires Alpine.js 3.x
  • Requires Tailwind CSS 3.x

Migration Guide

Upgrading from Previous Version

If you're upgrading from a previous version of the sidebar component, here are the changes:

New Features (Backward Compatible):

  • All new options are opt-in
  • Existing sidebars will work without changes
  • New variants and modes available
  • Enhanced accessibility (automatic)

Breaking Changes:

  • None - fully backward compatible

Recommended Updates:

  1. Enable keyboard shortcuts (enabled by default)
  2. Consider adding tooltips for collapsed state
  3. Enable state persistence for better UX
  4. Update to newer variant styles if desired
  5. Add ARIA labels to custom menu items

Example Migration:

// Old (still works)
sidebar.Sidebar(
    sidebar.SidebarHeader(g.Text("App")),
    sidebar.SidebarContent(...),
)

// New (with enhancements)
sidebar.SidebarWithOptions(
    []sidebar.SidebarOption{
        sidebar.WithVariant(sidebar.SidebarVariantFloating),
        sidebar.WithPersistState(true),
    },
    sidebar.SidebarHeader(g.Text("App")),
    sidebar.SidebarContent(
        sidebar.SidebarInput("Search...", "search"),
        sidebar.SidebarSeparator(),
        // ... menu items with tooltips
    ),
)

See Also

Documentation

Overview

Package sidebar provides sidebar navigation components with provider pattern integration.

The sidebar uses ForgeUI's provider pattern for state management, allowing child components to access sidebar state without prop drilling.

Index

Constants

This section is empty.

Variables

This section is empty.

Functions 

func Sidebar(children ...g.Node) g.Node

Sidebar creates a collapsible sidebar navigation with Alpine.js stores.

The sidebar uses Alpine.js stores for state management, allowing any component on the page to access sidebar state via $store.sidebar. Use SidebarLayoutContent or SidebarInset to create content areas that react to sidebar state changes.

Example: 

sidebar.Sidebar(
    sidebar.SidebarHeader(g.Text("My App")),
    sidebar.SidebarContent(
        menu.Section("Main",
            menu.Item("/dashboard", g.Text("Dashboard")),
            menu.Item("/users", g.Text("Users")),
        ),
    ),
    sidebar.SidebarFooter(g.Text("© 2024")),
)

func SidebarContent 

func SidebarContent(children ...g.Node) g.Node

SidebarContent creates the main navigation area Matches shadcn sidebar-content styling

Example: 

sidebar.SidebarContent(
    menu.Section("Main",
        menu.Item("/", g.Text("Home")),
    ),
)

func SidebarFooter 

func SidebarFooter(children ...g.Node) g.Node

SidebarFooter creates the sidebar footer section

Example: 

sidebar.SidebarFooter(
    menu.Item("#", g.Text("Settings")),
)

func SidebarGroup 

func SidebarGroup(children ...g.Node) g.Node

SidebarGroup creates a collapsible group within the sidebar

Example: 

sidebar.SidebarGroup(
    sidebar.SidebarGroupLabel("Projects"),
    sidebar.SidebarMenu(...),
)

func SidebarGroupAction 

func SidebarGroupAction(icon g.Node, label string) g.Node

SidebarGroupAction creates an action button for a group (e.g., "Add Project")

Example: 

sidebar.SidebarGroupAction(icons.Plus(), "Add Project")

func SidebarGroupCollapsible 

func SidebarGroupCollapsible(opts []SidebarGroupOption, children ...g.Node) g.Node

SidebarGroupCollapsible creates a collapsible group with animation

Example: 

sidebar.SidebarGroupCollapsible(
    []SidebarGroupOption{sidebar.WithGroupKey("projects"), sidebar.WithGroupDefaultOpen(true)},
    sidebar.SidebarGroupLabel("Projects"),
    sidebar.SidebarMenu(...),
)

func SidebarGroupContent 

func SidebarGroupContent(key string, children ...g.Node) g.Node

SidebarGroupContent wraps collapsible group content

Example: 

sidebar.SidebarGroupContent("projects", sidebar.SidebarMenu(...))

func SidebarGroupLabel 

func SidebarGroupLabel(text string, children ...g.Node) g.Node

SidebarGroupLabel creates a label for a sidebar group Matches shadcn sidebar-group-label styling

Example: 

sidebar.SidebarGroupLabel("Navigation")

func SidebarGroupLabelCollapsible 

func SidebarGroupLabelCollapsible(key string, text string, icon g.Node) g.Node

SidebarGroupLabelCollapsible creates a clickable label for collapsible groups Matches shadcn sidebar-group-label styling with collapsible behavior

Example: 

sidebar.SidebarGroupLabelCollapsible("projects", "Projects", icon)

func SidebarHeader 

func SidebarHeader(children ...g.Node) g.Node

SidebarHeader creates the sidebar header section

Example: 

sidebar.SidebarHeader(
    html.Img(g.Attr("src", "/logo.svg")),
    g.Text("My App"),
)

func SidebarInput 

func SidebarInput(placeholder string, name string, attrs ...g.Node) g.Node

SidebarInput creates a search/filter input for the sidebar

Example: 

sidebar.SidebarInput("Search...", "search-query")

func SidebarInset 

func SidebarInset(children ...g.Node) g.Node

SidebarInset creates the main content area with proper layout Uses Alpine store to access sidebar state (works as sibling to Sidebar)

Example: 

sidebar.SidebarInset(
    sidebar.SidebarInsetHeader(...),
    html.Main(...),
)

func SidebarInsetHeader 

func SidebarInsetHeader(children ...g.Node) g.Node

SidebarInsetHeader creates a header with sidebar trigger and breadcrumbs

Example: 

sidebar.SidebarInsetHeader(
    sidebar.SidebarTrigger(),
    breadcrumb.Breadcrumb(...),
)

func SidebarLayout 

func SidebarLayout(children ...g.Node) g.Node

SidebarLayout creates a layout wrapper that adjusts content for sidebar width

Example: 

sidebar.SidebarLayout(
    sidebar.Sidebar(...),
    html.Main(...), // your content
)

func SidebarLayoutContent 

func SidebarLayoutContent(children ...g.Node) g.Node

SidebarLayoutContent creates content area that respects sidebar width Uses Alpine store to access sidebar state (works as sibling to Sidebar)

Example: 

sidebar.SidebarLayoutContent(
    html.Div(...), // your page content
)

func SidebarMenu 

func SidebarMenu(children ...g.Node) g.Node

SidebarMenu creates a menu list container Matches shadcn sidebar-menu styling

Example: 

sidebar.SidebarMenu(
    sidebar.SidebarMenuItem(...),
)

func SidebarMenuAction 

func SidebarMenuAction(icon g.Node, label string, attrs ...g.Node) g.Node

SidebarMenuAction creates an action button that appears on hover

Example: 

sidebar.SidebarMenuAction(icons.MoreVertical(), "Options")

func SidebarMenuBadge 

func SidebarMenuBadge(text string) g.Node

SidebarMenuBadge creates a badge for menu items

Example: 

sidebar.SidebarMenuBadge("12")

func SidebarMenuButton 

func SidebarMenuButton(label string, opts ...SidebarMenuButtonOption) g.Node

SidebarMenuButton creates a menu button/link with icon and label

Example: 

sidebar.SidebarMenuButton(
    "Dashboard",
    sidebar.WithMenuHref("/dashboard"),
    sidebar.WithMenuIcon(icons.LayoutDashboard()),
    sidebar.WithMenuActive(),
)

func SidebarMenuItem 

func SidebarMenuItem(children ...g.Node) g.Node

SidebarMenuItem creates a menu item container Matches shadcn sidebar-menu-item styling

Example: 

sidebar.SidebarMenuItem(
    sidebar.SidebarMenuButton(...),
)

func SidebarMenuSub 

func SidebarMenuSub(children ...g.Node) g.Node

SidebarMenuSub creates a submenu container Matches shadcn sidebar-menu-sub styling with border indicator

Example: 

sidebar.SidebarMenuSub(
    sidebar.SidebarMenuSubItem(...),
)

func SidebarMenuSubButton 

func SidebarMenuSubButton(label string, href string, active bool) g.Node

SidebarMenuSubButton creates a submenu button/link Matches shadcn sidebar-menu-sub-button styling

Example: 

sidebar.SidebarMenuSubButton("Settings", "/settings", false)

func SidebarMenuSubItem 

func SidebarMenuSubItem(children ...g.Node) g.Node

SidebarMenuSubItem creates a submenu item Matches shadcn sidebar-menu-sub-item styling

Example: 

sidebar.SidebarMenuSubItem(
    sidebar.SidebarMenuSubButton(...),
)

func SidebarMenuTooltip 

func SidebarMenuTooltip(label string, children ...g.Node) g.Node

SidebarMenuTooltip wraps a menu button with a tooltip that shows when sidebar is collapsed

Example: 

sidebar.SidebarMenuTooltip("Dashboard",
    sidebar.SidebarMenuButton("Dashboard", ...),
)

func SidebarRail 

func SidebarRail() g.Node

SidebarRail creates an invisible rail for better collapse interaction Uses Alpine store for toggling

Example: 

sidebar.SidebarRail()

func SidebarSeparator 

func SidebarSeparator() g.Node

SidebarSeparator creates a visual separator in the sidebar

Example: 

sidebar.SidebarSeparator()

func SidebarToggle 

func SidebarToggle() g.Node

SidebarToggle creates a collapse/expand toggle button

Example: 

sidebar.SidebarToggle()

func SidebarTrigger 

func SidebarTrigger() g.Node

SidebarTrigger creates a trigger button for mobile/desktop Uses Alpine store for toggling (works from anywhere on the page)

Example: 

sidebar.SidebarTrigger()

func SidebarTriggerDesktop 

func SidebarTriggerDesktop() g.Node

SidebarTriggerDesktop creates a desktop-only trigger Uses Alpine store for toggling (works from anywhere on the page)

Example: 

sidebar.SidebarTriggerDesktop()

func SidebarWithOptions 

func SidebarWithOptions(opts []SidebarOption, children ...g.Node) g.Node

SidebarWithOptions creates sidebar with custom options and Alpine.js store integration

Types

type SidebarCollapsibleMode 

type SidebarCollapsibleMode string

SidebarCollapsibleMode defines how the sidebar collapses 

const (
	CollapsibleOffcanvas SidebarCollapsibleMode = "offcanvas" // Slides off screen
	CollapsibleIcon      SidebarCollapsibleMode = "icon"      // Shrinks to icon only
	CollapsibleNone      SidebarCollapsibleMode = "none"      // Not collapsible
)

type SidebarGroupOption 

type SidebarGroupOption func(*SidebarGroupProps)

SidebarGroupOption is a functional option for configuring collapsible sidebar groups

func WithGroupClass 

func WithGroupClass(class string) SidebarGroupOption

WithGroupClass adds custom classes

func WithGroupCollapsible 

func WithGroupCollapsible() SidebarGroupOption

WithGroupCollapsible makes the group collapsible

func WithGroupDefaultOpen 

func WithGroupDefaultOpen(open bool) SidebarGroupOption

WithGroupDefaultOpen sets the default open state

func WithGroupKey 

func WithGroupKey(key string) SidebarGroupOption

WithGroupKey sets a unique key for the collapsible state

type SidebarGroupProps 

type SidebarGroupProps struct {
	Collapsible    bool
	DefaultOpen    bool
	CollapsibleKey string
	Class          string
}

SidebarGroupProps defines collapsible sidebar group configuration

type SidebarMenuButtonOption 

type SidebarMenuButtonOption func(*SidebarMenuButtonProps)

SidebarMenuButtonOption is a functional option for menu buttons

func WithActive added in v0.0.4 

func WithActive(active bool) SidebarMenuButtonOption

WithActive marks the menu item as active

func WithMenuActive 

func WithMenuActive() SidebarMenuButtonOption

WithMenuActive marks the menu item as active

func WithMenuAsButton 

func WithMenuAsButton() SidebarMenuButtonOption

WithMenuAsButton renders as button instead of link

func WithMenuAttrs 

func WithMenuAttrs(attrs ...g.Node) SidebarMenuButtonOption

WithMenuAttrs adds custom attributes

func WithMenuBadge 

func WithMenuBadge(badge g.Node) SidebarMenuButtonOption

WithMenuBadge adds a badge to the menu button

func WithMenuClass 

func WithMenuClass(class string) SidebarMenuButtonOption

WithMenuClass adds custom classes

func WithMenuHref 

func WithMenuHref(href string) SidebarMenuButtonOption

WithMenuHref sets the link URL

func WithMenuIcon 

func WithMenuIcon(icon g.Node) SidebarMenuButtonOption

WithMenuIcon adds an icon to the menu button

func WithMenuSize 

func WithMenuSize(size SidebarMenuButtonSize) SidebarMenuButtonOption

WithMenuSize sets the menu button size

func WithMenuTooltip 

func WithMenuTooltip(text string) SidebarMenuButtonOption

WithMenuTooltip adds a tooltip for collapsed state

func WithMenuVariant 

func WithMenuVariant(variant SidebarMenuButtonVariant) SidebarMenuButtonOption

WithMenuVariant sets the menu button variant

type SidebarMenuButtonProps 

type SidebarMenuButtonProps struct {
	Href     string
	Active   bool
	Icon     g.Node
	Badge    g.Node
	Tooltip  string
	AsButton bool
	Variant  SidebarMenuButtonVariant
	Size     SidebarMenuButtonSize
	Class    string
	Attrs    []g.Node
}

SidebarMenuButtonProps defines menu button configuration

type SidebarMenuButtonSize 

type SidebarMenuButtonSize string

SidebarMenuButtonSize defines menu button sizes 

const (
	MenuButtonSizeSmall   SidebarMenuButtonSize = "sm"
	MenuButtonSizeDefault SidebarMenuButtonSize = "default"
	MenuButtonSizeLarge   SidebarMenuButtonSize = "lg"
)

type SidebarMenuButtonVariant 

type SidebarMenuButtonVariant string

SidebarMenuButtonVariant defines menu button visual styles 

const (
	MenuButtonDefault SidebarMenuButtonVariant = "default"
	MenuButtonOutline SidebarMenuButtonVariant = "outline"
)

type SidebarOption 

type SidebarOption func(*SidebarProps)

SidebarOption is a functional option for configuring sidebar

func WithCollapsible 

func WithCollapsible(collapsible bool) SidebarOption

WithCollapsible allows sidebar to be collapsed

func WithCollapsibleMode 

func WithCollapsibleMode(mode SidebarCollapsibleMode) SidebarOption

WithCollapsibleMode sets how the sidebar collapses

func WithDefaultCollapsed 

func WithDefaultCollapsed(collapsed bool) SidebarOption

WithDefaultCollapsed sets initial collapsed state

func WithKeyboardShortcut 

func WithKeyboardShortcut(key string) SidebarOption

WithKeyboardShortcut enables keyboard shortcut and sets the key (default: "b" for Cmd/Ctrl+B)

func WithKeyboardShortcutEnabled 

func WithKeyboardShortcutEnabled(enabled bool) SidebarOption

WithKeyboardShortcutEnabled enables or disables keyboard shortcuts

func WithPersistState 

func WithPersistState(persist bool) SidebarOption

WithPersistState enables state persistence to localStorage/sessionStorage

func WithSide 

func WithSide(side forgeui.Side) SidebarOption

WithSide sets sidebar position (left or right)

func WithSidebarAttrs 

func WithSidebarAttrs(attrs ...g.Node) SidebarOption

WithSidebarAttrs adds custom attributes to sidebar

func WithSidebarClass 

func WithSidebarClass(class string) SidebarOption

WithSidebarClass adds custom classes to sidebar

func WithStorageKey 

func WithStorageKey(key string) SidebarOption

WithStorageKey sets a custom storage key for state persistence

func WithStorageType 

func WithStorageType(storageType string) SidebarOption

WithStorageType sets the storage type ("localStorage" or "sessionStorage")

func WithVariant 

func WithVariant(variant SidebarVariant) SidebarOption

WithVariant sets the visual variant of the sidebar

type SidebarProps 

type SidebarProps struct {
	DefaultCollapsed       bool
	Collapsible            bool
	CollapsibleMode        SidebarCollapsibleMode
	Variant                SidebarVariant
	Side                   forgeui.Side
	Class                  string
	Attrs                  []g.Node
	KeyboardShortcutKey    string
	KeyboardShortcutEnable bool
	PersistState           bool
	StorageKey             string
	StorageType            string // "localStorage" or "sessionStorage"
}

SidebarProps defines sidebar configuration

type SidebarVariant 

type SidebarVariant string

SidebarVariant defines the visual style of the sidebar 

const (
	SidebarVariantSidebar  SidebarVariant = "sidebar"  // Default sidebar
	SidebarVariantFloating SidebarVariant = "floating" // Floating sidebar with rounded corners
	SidebarVariantInset    SidebarVariant = "inset"    // Inset sidebar with margins
)

Source Files

View all Source files

Jump to

Keyboard shortcuts

? : This menu
/ : Search site
f or F : Jump to
y or Y : Canonical URL
go.dev uses cookies from Google to deliver and enhance the quality of its services and to analyze traffic. Learn more.