Skip to content
Primer
ViewComponents
What's new
Design
Interface guidelinesOcticonsPrototypingPresentationsCommand lineMobile
Development
CSSReactViewComponents
About
Getting started
ContributingSystem arguments
Components
AvatarBlankslateBorderBoxBoxBreadcrumbButtonCounterFlashLabelLayoutLinkOcticonPopoverProgressBarSpinnerStateSubheadTextTimelineItem
GitHub

Layout

Table of contents
Table of contents

Use Layout to build a main/sidebar layout.

Examples

Default

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

Left sidebar

<%= render(Primer::LayoutComponent.new(side: :left)) do |component| %>
  <% component.with(:sidebar) { "Sidebar" } %>
  <% component.with(: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
Edit this page on GitHub