Sidebar Navigation — Layout Controls

Minimal Example

{
  "id": "settings-sidebar",
  "type": "sidebar-nav",
  "order": 1,
  "width": "full",
  "settings": {
    "items": [
      { "id": "nav-general",    "label": "General",    "sectionId": "sec-general",    "icon": "fa-solid fa-gear" },
      { "id": "nav-security",   "label": "Security",   "sectionId": "sec-security",   "icon": "fa-solid fa-lock" },
      { "id": "nav-billing",    "label": "Billing",    "sectionId": "sec-billing",    "icon": "fa-solid fa-credit-card" },
      { "id": "nav-integrations","label": "Integrations","sectionId": "sec-integrations","icon": "fa-solid fa-plug" }
    ],
    "defaultItem": "nav-general"
  }
}

Settings Reference

Setting	Type	Default	Description
`items`	NavItem[]	—	Navigation item definitions
`defaultItem`	string (item id)	First item	Which nav item is active on load
`sidebarWidth`	string (CSS)	`"220px"`	Width of the sidebar column
`position`	`left` \| `right`	`left`	Which side the sidebar appears on
`sticky`	boolean	false	Stick the sidebar while content scrolls
`showGroupLabels`	boolean	false	Show section header labels in the sidebar

Nav Item with Groups

{
  "settings": {
    "showGroupLabels": true,
    "items": [
      { "id": "nav-profile",       "label": "Profile",          "sectionId": "sec-profile",       "icon": "fa-solid fa-user",          "group": "Account" },
      { "id": "nav-preferences",   "label": "Preferences",      "sectionId": "sec-preferences",   "icon": "fa-solid fa-sliders",       "group": "Account" },
      { "id": "nav-2fa",           "label": "Two-Factor Auth",  "sectionId": "sec-2fa",           "icon": "fa-solid fa-mobile-screen", "group": "Security" },
      { "id": "nav-sessions",      "label": "Active Sessions",  "sectionId": "sec-sessions",      "icon": "fa-solid fa-clock",         "group": "Security" },
      { "id": "nav-plan",          "label": "Plan",             "sectionId": "sec-plan",          "icon": "fa-solid fa-star",          "group": "Billing" },
      { "id": "nav-invoices",      "label": "Invoices",         "sectionId": "sec-invoices",      "icon": "fa-solid fa-file-invoice",  "group": "Billing" }
    ]
  }
}

// Sidebar renders:
// — Account —
//   Profile
//   Preferences
// — Security —
//   Two-Factor Auth
//   Active Sessions
// — Billing —
//   Plan
//   Invoices

Sticky Sidebar

Enable sticky: true for long content forms where the sidebar should remain visible as the user scrolls through the selected section's content:

{
  "settings": {
    "sticky": true,
    "sidebarWidth": "240px",
    "items": [...]
  }
}

sidebar-nav vs tabs

sidebar-nav	tabs
Two-column layout (nav + content)	Single column with tab bar above
Best for settings-style forms	Best for data-entry forms
Many sections (5+) with icons	3–7 sections, horizontal fit
Can be sticky while scrolling	Tab bar scrolls with page

← Breadcrumb Next: Data Table →