Frontend: Dashboard

Build admin panels and dashboards quickly using the dashboard package.

Getting Started
Frontend
Stores

Note: The dashboard package is a separate, optional Go package (not part of this framework), but we highly recommend using it for building flexible, consistent, and efficient web app layouts.

Dashboard: Flexible Layouts for Go Web Apps

The Problem

Building dashboards with user management and menus can be tricky. It’s easy to end up with a cluttered interface, confusing navigation, or complicated user controls. Users need to find what they want quickly, and admins need to manage users without hassle.

The Solution

We solve this by keeping things organized and clear. Each part of the dashboard—like menus and user management—is designed to be simple to use. Features are grouped logically, and the layout guides users naturally to what they need.

Benefits

  • Easy to navigate
  • Quick user management
  • Clean, uncluttered design
  • Simple to add new features

Typical Usage

Most pages use the dashboard package like this:

import "github.com/gouniverse/dashboard"

db := dashboard.NewDashboard(dashboard.Config{
    Title:   "My Dashboard",
    Content: "<h1>Welcome to the dashboard!</h1>",
    Sidebar: dashboard.Sidebar().
        AddItem("Home", "/home").
        AddItem("Settings", "/settings"),
    // Add other config fields as needed
})

html := db.ToHTML()
  • You can set the title, sidebar, and content via the config struct.
  • Sidebar items can be added using AddItem.
  • Content can be any HTML string or Go-generated HTML.
  • Render the dashboard to HTML with .ToHTML().

dashboard.Config fields (main options):

dashboard.Config{
    HTTPRequest:     r,                    // *http.Request (optional, for user/session context)
    Title:           "Page Title",         // string, shown in the browser title bar
    Content:         "<div>Content</div>", // string or HTML, main page content
    Sidebar:         sidebar,              // sidebar component (optional)
    MenuItems:       menuItems,            // []dashboard.MenuItem (optional)
    LogoImageURL:    "/media/logo.png",    // string (optional)
    LogoRawHtml:     logoHtml,             // string (optional, for custom logo HTML)
    LogoRedirectURL: "/",                  // string (URL to redirect when logo clicked)
    User:            dashboardUser,        // dashboard.User struct (optional)
    UserMenu:        userMenu,             // []dashboard.MenuItem (optional)
    ThemeHandlerUrl: "/theme",             // string (optional, for theme switching)
    Scripts:         []string{},           // []string, inline scripts (optional)
    ScriptURLs:      []string{},           // []string, external script URLs (optional)
    Styles:          []string{},           // []string, inline styles (optional)
    StyleURLs:       []string{},           // []string, external style URLs (optional)
    FaviconURL:      "/favicon.ico",       // string (optional)
    // ...other options as supported by the package
}

Optional Components

The dashboard package provides several optional UI helpers:

  • Card: For boxed content areas
  • Tab Layout: For tabbed interfaces
  • ShadowBox: For visually separated sections

You are not required to use these. They are provided to help you build UIs faster if you want.

Example: Using a Card and Tabs (Optional)

card := components.NewCard(components.CardConfig{
    Title:   "Settings",
    Content: components.NewTabLayout(components.TabLayoutConfig{
        Items: []components.TabItem{
            {ID: "general", Title: "General", Content: "<p>General settings here</p>", Active: true},
            {ID: "advanced", Title: "Advanced", Content: "<p>Advanced settings here</p>"},
        },
    }).ToHTML(),
})

Customization & Freedom

  • You can mix dashboard layouts with your own HTML, HB, or other Go-generated UI.
  • The dashboard does not restrict your development style.

Further Help

For advanced features or more components, see the dashboard GitHub page.

Summary: The dashboard is a flexible tool—use it to speed up UI development in Go, or just use the parts you want. There are no required patterns or components. We recommend using the dashboard package for most projects to ensure consistency, save development time, and take advantage of its ready-made components.

Menu