Skip to content
Primer/ViewComponents
What's new
Design
Interface guidelinesOcticonsPresentationsCommand lineMobileDesktop
Development
CSSReactViewComponents
About
Getting started
ContributingSystem argumentsMigrationStatuses
Components
AutoCompleteAutoCompleteItemAvatarAvatarStackBlankslateBorderBoxBoxBreadcrumbButtonButtonGroupButtonMarketingClipboardCopyCloseButtonCounterDetailsDropdownDropdownMenuFlashFlexFlexItemHeadingHiddenTextExpanderImageCropIconButtonLabelLayoutLinkMenuMarkdownOcticonOcticonSymbolsPopoverProgressBarSpinnerStateSubheadTabContainerTabNavTextTimeAgoTimelineItemTooltipTruncateUnderlineNav
GitHub

Layout

Table of contents
Alpha
View sourceView storybook
Table of contents

Use Layout to build a main/sidebar layout.

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 %>

Arguments

NameTypeDefaultDescription
responsiveBooleanfalseWhether to collapse layout to a single column at smaller widths.
sideSymbol:rightWhich side to display the sidebar on. One of :right and :left.
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
Edit this page on GitHub