Skip to main content

Pivotal UI

v19.0.0
Components / Siteframe
Edit this page
Report an issue

Siteframe

The Siteframe component provides a template for your app. It is meant to take up the whole page.

It is comprised of a Header and Sidebar, both of which are optional. To include a Header and Sidebar, pass in headerProps and sidebarProps respectively.

The sidebar is not meant to be scrollable. To make the content in the body scrollable, wrap it in a container that has overflow: auto (example below).

To mark a sidebar link as active (highlighted with a green left border), set active: true on the link object given in primaryLinks or secondaryLinks.

With Sidebar and scrollable content
ReferenceError: React is not defined
With Header and Sidebar
ReferenceError: React is not defined
Header with custom content
ReferenceError: React is not defined
Header only
ReferenceError: React is not defined

Props

Siteframe Props

PropertyRequiredTypeDefaultDescription
childrennoAnyThe content to put inside the siteframe body
headerPropsnoobjectThe props to pass into Header. If not provided, no Header will be rendered.
sidebarPropsnoobjectThe props to pass into Sidebar. If not provided, no Sidebar will be rendered.

Header Props

PropertyRequiredTypeDefaultDescription
classNamenoStringAdditional className, added alongside className pui-siteframe-header
colsnoAny[]Array of FlexCol's to include to the right of company/product name.
companyNameyesnodeName of company
logononodenullContent to the left of company name.
productNameyesnodeName of product. This will appear in bold.
PropertyRequiredTypeDefaultDescription
classNamenoStringAdditional className, added alongside className pui-siteframe-sidebar
primaryLinksyesArrayArray of objects (representing a link) to be passed into renderLink function. Appears at the top of the sidebar. If an object has property active: true, it will be styled as an active link.
secondaryLinksnoArray[]Array of objects (representing a link) to be passed into renderLink function. Appears at the bottom of the sidebar. If an object has property active: true, it will be styled as an active link.
renderLinkyesFunctionFunction that will be called with each link object as an argument. Should return a node representing how to render that link.

Imports

Import React components (including CSS):

import {Siteframe} from 'pivotal-ui/react/siteframe';

Import CSS only:

import 'pivotal-ui/css/siteframe';