On this page
Complete subheader setup with sidebar toggle, breadcrumbs, and action buttons.
layout.build_subheader do |subheader|
subheader.build_sidebar_toggle_button(target: ui.layout.sidebars.first)
subheader.build_breadcrumbs do |breadcrumbs|
breadcrumbs.build_breadcrumb("Home", "#")
breadcrumbs.build_breadcrumb("Settings", "#")
breadcrumbs.build_breadcrumb("Profile")
end
subheader.build_button("settings", "#", title: "Settings")
subheader.build_button("info", "#", title: "Info")
end<div class="subheader">
<button data-controller="toggle-button" data-action="click->toggle-button#toggle" data-toggle-button-target-value="main_sidebar" data-toggle-button-on-class="btn-outline-primary" data-toggle-button-off-class="btn-naked" class="btn-outline-primary btn btn-circular size-8" title="Toggle navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5h16"></path><path d="M4 12h16"></path><path d="M4 19h16"></path></svg>
</button>
<div data-controller="breadcrumbs" class="subheader-breadcrumbs">
<div data-breadcrumbs-target="dropdownList" class="subheader-breadcrumbs subheader-breadcrumbs-dropdown-list hidden">
<div class="dropdown dropdown-center dropdown-down" data-controller="dropdown">
<button data-action="click->dropdown#toggle" class="btn">
<svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg>
Profile
</button>
<div class="dropdown-menu" data-dropdown-target="menu" data-action="click->dropdown#close">
<a class="dropdown-menu-item" href="#">Home</a>
<a class="dropdown-menu-item" href="#">Settings</a>
<span class="dropdown-menu-item">Profile</span>
</div>
</div>
</div>
<div data-breadcrumbs-target="firstLastDropdownList" class="subheader-breadcrumbs subheader-breadcrumbs-first-last-dropdown-list hidden">
<a href="#">Home</a>
<span class="px-3px">»</span>
<div class="dropdown dropdown-center dropdown-down" data-controller="dropdown">
<button data-action="click->dropdown#toggle" class="btn">...</button>
<div class="dropdown-menu" data-dropdown-target="menu" data-action="click->dropdown#close">
<a class="dropdown-menu-item" href="#">Settings</a>
</div>
</div>
<span class="px-3px">»</span>
<span>Profile</span>
</div>
<div data-breadcrumbs-target="fullList" class="subheader-breadcrumbs subheader-breadcrumbs-full-list hidden">
<a href="#">Home</a>
<span class="px-3px">»</span>
<a href="#">Settings</a>
<span class="px-3px">»</span>
<span>Profile</span>
</div>
</div>
<div class="subheader-buttons">
<a class="btn btn-naked subheader-btn" href="#" title="Settings">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"></path><circle cx="12" cy="12" r="3"></circle></svg>
</a>
<a class="btn btn-naked subheader-btn" href="#" title="Info">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path></svg>
</a>
</div>
</div>
A button to toggle the sidebar visibility on mobile or collapsed layouts.
layout.build_subheader do |subheader|
subheader.build_sidebar_toggle_button(target: ui.layout.sidebars.first)
end
<div class="subheader">
<button data-controller="toggle-button" data-action="click->toggle-button#toggle" data-toggle-button-target-value="main_sidebar" data-toggle-button-on-class="btn-outline-primary" data-toggle-button-off-class="btn-naked" class="btn-outline-primary btn btn-circular size-8" title="Toggle navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5h16"></path><path d="M4 12h16"></path><path d="M4 19h16"></path></svg>
</button>
</div>
Display navigation breadcrumbs showing the current page hierarchy.
layout.build_subheader do |subheader|
subheader.build_breadcrumbs do |breadcrumbs|
breadcrumbs.build_breadcrumb("Home", "#")
breadcrumbs.build_breadcrumb("Users", "#")
breadcrumbs.build_breadcrumb("Profile")
end
end<div class="subheader">
<div data-controller="breadcrumbs" class="subheader-breadcrumbs">
<div data-breadcrumbs-target="dropdownList" class="subheader-breadcrumbs subheader-breadcrumbs-dropdown-list hidden">
<div class="dropdown dropdown-center dropdown-down" data-controller="dropdown">
<button data-action="click->dropdown#toggle" class="btn">
<svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg>
Profile
</button>
<div class="dropdown-menu" data-dropdown-target="menu" data-action="click->dropdown#close">
<a class="dropdown-menu-item" href="#">Home</a>
<a class="dropdown-menu-item" href="#">Users</a>
<span class="dropdown-menu-item">Profile</span>
</div>
</div>
</div>
<div data-breadcrumbs-target="firstLastDropdownList" class="subheader-breadcrumbs subheader-breadcrumbs-first-last-dropdown-list hidden">
<a href="#">Home</a>
<span class="px-3px">»</span>
<div class="dropdown dropdown-center dropdown-down" data-controller="dropdown">
<button data-action="click->dropdown#toggle" class="btn">...</button>
<div class="dropdown-menu" data-dropdown-target="menu" data-action="click->dropdown#close">
<a class="dropdown-menu-item" href="#">Users</a>
</div>
</div>
<span class="px-3px">»</span>
<span>Profile</span>
</div>
<div data-breadcrumbs-target="fullList" class="subheader-breadcrumbs subheader-breadcrumbs-full-list hidden">
<a href="#">Home</a>
<span class="px-3px">»</span>
<a href="#">Users</a>
<span class="px-3px">»</span>
<span>Profile</span>
</div>
</div>
</div>
Add action buttons to the right side of the subheader.
layout.build_subheader do |subheader|
subheader.build_breadcrumbs do |breadcrumbs|
breadcrumbs.build_breadcrumb("Dashboard")
end
subheader.build_button("settings", "#", title: "Settings")
subheader.build_button("info", "#", title: "Info")
end<div class="subheader">
<div data-controller="breadcrumbs" class="subheader-breadcrumbs">
<div data-breadcrumbs-target="dropdownList" class="subheader-breadcrumbs subheader-breadcrumbs-dropdown-list hidden">
<div class="dropdown dropdown-center dropdown-down" data-controller="dropdown">
<button data-action="click->dropdown#toggle" class="btn">
<svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg>
Dashboard
</button>
<div class="dropdown-menu" data-dropdown-target="menu" data-action="click->dropdown#close">
<span class="dropdown-menu-item">Dashboard</span>
</div>
</div>
</div>
<div data-breadcrumbs-target="firstLastDropdownList" class="subheader-breadcrumbs subheader-breadcrumbs-first-last-dropdown-list hidden">
<span>Dashboard</span>
</div>
<div data-breadcrumbs-target="fullList" class="subheader-breadcrumbs subheader-breadcrumbs-full-list hidden">
<span>Dashboard</span>
</div>
</div>
<div class="subheader-buttons">
<a class="btn btn-naked subheader-btn" href="#" title="Settings">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"></path><circle cx="12" cy="12" r="3"></circle></svg>
</a>
<a class="btn btn-naked subheader-btn" href="#" title="Info">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path></svg>
</a>
</div>
</div>
Add toggle buttons on the right side for panels other than the main sidebar.
layout.build_subheader do |subheader|
subheader.build_breadcrumbs do |breadcrumbs|
breadcrumbs.build_breadcrumb("Home")
end
subheader.build_toggle_button(icon: "chevron-right", title: "Toggle panel", target: ui.layout.sidebars.last)
end<div class="subheader">
<div data-controller="breadcrumbs" class="subheader-breadcrumbs">
<div data-breadcrumbs-target="dropdownList" class="subheader-breadcrumbs subheader-breadcrumbs-dropdown-list hidden">
<div class="dropdown dropdown-center dropdown-down" data-controller="dropdown">
<button data-action="click->dropdown#toggle" class="btn">
<svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg>
Home
</button>
<div class="dropdown-menu" data-dropdown-target="menu" data-action="click->dropdown#close">
<span class="dropdown-menu-item">Home</span>
</div>
</div>
</div>
<div data-breadcrumbs-target="firstLastDropdownList" class="subheader-breadcrumbs subheader-breadcrumbs-first-last-dropdown-list hidden">
<span>Home</span>
</div>
<div data-breadcrumbs-target="fullList" class="subheader-breadcrumbs subheader-breadcrumbs-full-list hidden">
<span>Home</span>
</div>
</div>
<div class="subheader-buttons">
<button data-controller="toggle-button" data-action="click->toggle-button#toggle" data-toggle-button-target-value="table_of_contents" data-toggle-button-on-class="btn-outline-primary" data-toggle-button-off-class="btn-naked" class="btn-outline-primary btn" title="Toggle panel">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg>
</button>
</div>
</div>
