Topbar

The Topbar sits above all page content and contains breadcrumbs and the user menu.

Topbar with Breadcrumbs, Avatar, and Search

Sage Component

SageTopbar

<style>
.sage-topbar--hide {
	visibility: hidden;
}
</style>

<h3>Topbar with Breadcrumbs, Avatar, and Search</h3>
<%= sage_component SageButton, {
	style: "primary",
	value: 'Show Topbar',
	attributes: {
		"data-hide-topbar": "hide",
	}
} %>
<%= sage_component SageTopbar, { css_classes: 'sage-topbar--hide' } do %>
	<% content_for :sage_topbar_content_left do %>
		<%= sage_component SageBreadcrumbs, {
			items: [
				{
					text: 'Page Title',
					url: 'http://example.com/1'
				},
				{
					text: 'Page Title',
					url: 'http://example.com/2'
				},
				{
					text: 'Page Title',
					url: 'http://example.com/3'
				}
			]
		} %>
	<% end %>
	<% content_for :sage_topbar_content_left_mobile do %>
		<%= sage_component SageButton, {
			icon: { name: 'menu', style: 'only' },
			value: 'Menu',
		} %>
	<% end %>
	<% content_for :sage_topbar_content_right do %>
		<%= sage_component SageIcon, { icon: 'search' } %>
		<%= sage_component SageAvatar, { size: '40px' } %>
	<% end %>
<% end %>

<script>
document.querySelector('[data-hide-topbar="hide"]').addEventListener('click', () => {
	document.querySelector('.sage-topbar').classList.toggle('sage-topbar--hide');
});
</script>

Property	Description	Type	Default
Content Slots
`:sage_topbar_content_left`	Slot into which breadcrumbs or other content can be placed. Only visible on desktop. Additional styling may be needed in such customized contexts.
`:sage_topbar_content_left_mobile`	Slot into which a menu button or other content can be placed. Only visible on mobile devices. Additional styling may be needed in such customized contexts.
`:sage_topbar_content_right`	Slot into which an avatar and search may be placed. Visible on all viewports. Additional styling may be needed in such customized contexts.

Don't