Skip to content
Primer/ViewComponents
What's new
Design
Interface guidelinesOcticonsPresentationsCommand lineMobileDesktop
Build
CSSReactViewComponents
ContributeAbout
Getting started
ContributingSystem argumentsLintingMigrationComponent status
Components
AutoCompleteAutoCompleteItemAvatarAvatarStackBlankslateBorderBoxBoxBreadcrumbsButtonButtonGroupButtonMarketingClipboardCopyCloseButtonCounterDetailsDropdownDropdownMenuFlashFlexFlexItemHeadingHiddenTextExpanderIconButtonImageImageCropLabelLayoutLinkLocalTimeMarkdownMenuOcticonOcticonSymbolsPopoverProgressBarSpinnerStateSubheadTabContainerTabNavTabPanelsTextTimeAgoTimelineItemTruncateUnderlineNavUnderlinePanels
Architecture decisions
Developing and publishing client-side behaviours251. Use Catalyst for client-side behaviours
GitHub
On this page

Layout

Alpha
View sourceView storybook
On this page

Use Layout to build a main/sidebar layout.

Arguments

NameTypeDefaultDescription
responsiveBooleanfalseWhether to collapse layout to a single column at smaller widths.
sideSymbol:rightWhich side to display the sidebar on. One of :left and :right.
sidebar_colInteger3Sidebar column width.
system_argumentsHashN/ASystem arguments

Slots

Main

The main content

NameTypeDefaultDescription
system_argumentsHashN/ASystem arguments

Sidebar

The sidebar content

NameTypeDefaultDescription
system_argumentsHashN/ASystem arguments

Examples

Default

Main
Sidebar
<%= render(Primer::LayoutComponent.new) do |component| %>
  <% component.sidebar { "Sidebar" } %>
  <% component.main { "Main" } %>
<% end %>

Left sidebar

Sidebar
Main
<%= render(Primer::LayoutComponent.new(side: :left)) do |component| %>
  <% component.sidebar { "Sidebar" } %>
  <% component.main { "Main" } %>
<% end %>
Edit this page on GitHub