Skip to content
Design System

Sidebar

Show design guidelines

The navigation components are lists of links that allow users to move throughout the application. Both the primary and secondary navigation display in the sidebar.

Code

Section titled “Code”
HTML
React
Angular 
<certara-sidebar>
  <certara-sidebar-list slot="primary" section="primary" menu-aria-label="Primary menu">
    <certara-sidebar-item href="#" collapsed-tooltip="Top-level item" label="Top-level item">
    </certara-sidebar-item>
    <certara-sidebar-group label="Group 1">
      <certara-icon class="menu-icon" slot="start" name="star"></certara-icon>
      <certara-sidebar-item href="#" label="Item 1"></certara-sidebar-item>
      <certara-sidebar-item href="#" label="Item 2"></certara-sidebar-item>
    </certara-sidebar-group>
    <certara-sidebar-group label="Group 2">
      <certara-icon class="menu-icon" slot="start" name="list" variant="regular"></certara-icon>
      <certara-sidebar-item href="#" label="Item 3"></certara-sidebar-item>
      <certara-sidebar-item href="#" label="Item 4"></certara-sidebar-item>
    </certara-sidebar-group>
  </certara-sidebar-list>
</certara-sidebar>
import { CertaraIcon, CertaraSidebar, CertaraSidebarGroup, CertaraSidebarItem, CertaraSidebarList } from '@certara/certara-ui-react';


<CertaraSidebar>
  <CertaraSidebarList slot="primary" section="primary" menuAriaLabel="Primary menu">
    <CertaraSidebarItem href="#" collapsedTooltip="Top-level item" label="Top-level item">
    </CertaraSidebarItem>
    <CertaraSidebarGroup label="Group 1">
      <CertaraIcon className="menu-icon" slot="start" name="star" />
      <CertaraSidebarItem href="#" label="Item 1" />
      <CertaraSidebarItem href="#" label="Item 2" />
    </CertaraSidebarGroup>
    <CertaraSidebarGroup label="Group 2">
      <CertaraIcon className="menu-icon" slot="start" name="list" variant="regular" />
      <CertaraSidebarItem href="#" label="Item 3" />
      <CertaraSidebarItem href="#" label="Item 4" />
    </CertaraSidebarGroup>
  </CertaraSidebarList>
</CertaraSidebar>
// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';


@NgModule({
  imports: [CertaraUiAngularModule]
})


// In your template:
<certara-sidebar>
  <certara-sidebar-list slot="primary" section="primary" menu-aria-label="Primary menu">
    <certara-sidebar-item href="#" collapsed-tooltip="Top-level item" label="Top-level item">
    </certara-sidebar-item>
    <certara-sidebar-group label="Group 1">
      <certara-icon class="menu-icon" slot="start" name="star"></certara-icon>
      <certara-sidebar-item href="#" label="Item 1"></certara-sidebar-item>
      <certara-sidebar-item href="#" label="Item 2"></certara-sidebar-item>
    </certara-sidebar-group>
    <certara-sidebar-group label="Group 2">
      <certara-icon class="menu-icon" slot="start" name="list" variant="regular"></certara-icon>
      <certara-sidebar-item href="#" label="Item 3"></certara-sidebar-item>
      <certara-sidebar-item href="#" label="Item 4"></certara-sidebar-item>
    </certara-sidebar-group>
  </certara-sidebar-list>
</certara-sidebar>

certara-sidebar

Section titled “certara-sidebar”

Properties

Section titled “Properties”

accordion

Attributeaccordion
Typeboolean
Defaulttrue
Requiredfalse
DescriptionOnly one sidebar-group can be open at a time; set this to false to allow more than one

ariaLabel

Attributearia-label
Typestring
Default'Main navigation'
Requiredfalse
DescriptionAccessible label for navigation landmark

collapsed

Attributecollapsed
Typeboolean
Defaultfalse
Requiredfalse
DescriptionCollapse sidebar into compact form

collapsible

Attributecollapsible
Typeboolean
Defaulttrue
Requiredfalse
DescriptionEntire sidebar can collapse into a compact column

toggleId

Attributetoggle-id
Typestring
Defaultundefined
Requiredfalse
DescriptionOptional id on the collapse <button> (labels, tests, or deep links).

Events

Section titled “Events”
NameDescriptionBubbles
certaraCollapsedChangeFires when sidebar collapse state changestrue

Methods

Section titled “Methods”
NameSignatureDescription
setCollapsed(next: boolean) => Promise<void>Programmatically sets the collapsed state of the sidebar

Slots

Section titled “Slots”
NameDescription
primarySlot for main sidebar items. Should use <certara-sidebar-list section="primary">.
secondarySlot for secondary sidebar items. Should use <certara-sidebar-list section="secondary">.

certara-sidebar-list

Section titled “certara-sidebar-list”

Primary or Secondary groups for sidebar navigation items

Properties

Section titled “Properties”
Attributemenu-aria-label
Typestring
Defaultundefined
Requiredfalse
DescriptionAccessible label for the menu

section

Attributesection
Type"primary" | "secondary"
Default'primary'
Requiredfalse
DescriptionUse secondary for footer-style blocks (divider + spacing).

Events

Section titled “Events”

There are no events available for this component

Methods

Section titled “Methods”

There are no public methods available for this component

Slots

Section titled “Slots”
NameDescription
Main content slot for sidebar items. Should use <certara-sidebar-item> or <certara-sidebar-group> children.

certara-sidebar-group

Section titled “certara-sidebar-group”

Expandable section within a certara-sidebar-list which renders as a flyover popup when the sidebar is collapsed, and a disclosure section otherwise.

Item 1Item 2Item 3Item 4 
<certara-sidebar collapsible="false">
  <certara-sidebar-list>
    <certara-sidebar-group label="Expanded group" expanded="true">
      <certara-sidebar-item>Item 1</certara-sidebar-item>
      <certara-sidebar-item>Item 2</certara-sidebar-item>
    </certara-sidebar-group>
    <certara-sidebar-group label="Closed group">
      <certara-sidebar-item>Item 3</certara-sidebar-item>
      <certara-sidebar-item>Item 4</certara-sidebar-item>
    </certara-sidebar-group>
  </certara-sidebar-list>
</certara-sidebar>
import { CertaraSidebar, CertaraSidebarGroup, CertaraSidebarItem, CertaraSidebarList } from '@certara/certara-ui-react';


<CertaraSidebar collapsible={false}>
  <CertaraSidebarList>
    <CertaraSidebarGroup label="Expanded group" expanded={true}>
      <CertaraSidebarItem>Item 1</CertaraSidebarItem>
      <CertaraSidebarItem>Item 2</CertaraSidebarItem>
    </CertaraSidebarGroup>
    <CertaraSidebarGroup label="Closed group">
      <CertaraSidebarItem>Item 3</CertaraSidebarItem>
      <CertaraSidebarItem>Item 4</CertaraSidebarItem>
    </CertaraSidebarGroup>
  </CertaraSidebarList>
</CertaraSidebar>
// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';


@NgModule({
  imports: [CertaraUiAngularModule]
})


// In your template:
<certara-sidebar collapsible="false">
  <certara-sidebar-list>
    <certara-sidebar-group label="Expanded group" expanded="true">
      <certara-sidebar-item>Item 1</certara-sidebar-item>
      <certara-sidebar-item>Item 2</certara-sidebar-item>
    </certara-sidebar-group>
    <certara-sidebar-group label="Closed group">
      <certara-sidebar-item>Item 3</certara-sidebar-item>
      <certara-sidebar-item>Item 4</certara-sidebar-item>
    </certara-sidebar-group>
  </certara-sidebar-list>
</certara-sidebar>

Properties

Section titled “Properties”

expanded

Attributeexpanded
Typeboolean
Defaultfalse
Requiredfalse
DescriptionSet sidebar group to open or closed

label

Attributelabel
Typestring
Defaultundefined
Requiredtrue
DescriptionVisible label for the parent row (expand / collapse only).
Attributesubmenu-list-id
Typestring
Defaultundefined
Requiredfalse
DescriptionStable id for aria-controls / id on the nested list.

Events

Section titled “Events”
NameDescriptionBubbles
certaraSidebarGroupExpandedChangeFired when the group’s expanded state changes after opening or closing the in-flow submenu. Not emitted when the collapsed-sidebar flyout opens or closes.true
certaraSidebarGroupRequestOpenFired when this group is about to open its in-flow submenu (before expanded becomes true). The source detail is this group’s host element; certara-sidebar listens when accordion is enabled to close sibling groups. Not emitted for collapsed-sidebar flyouts.true

Methods

Section titled “Methods”
NameSignatureDescription
closeCollapsedFlyout() => Promise<void>Programmatically closes the flyout panel when the sidebar is collapsed.
closeSubmenu() => Promise<void>Programmatically closes the in-flow submenu when the sidebar is expanded.
openSubmenu() => Promise<void>Programmatically opens the in-flow submenu when the sidebar is expanded.

Slots

Section titled “Slots”
NameDescription
submenu rows (typically certara-sidebar-item children without a slot attribute).
startoptional content in the row button (e.g. icon).

certara-sidebar-item

Section titled “certara-sidebar-item”
Default 
<certara-sidebar collapsible="false">
  <certara-sidebar-list>
    <certara-sidebar-item>Default</certara-sidebar-item>
  </certara-sidebar-list>
</certara-sidebar>
import { CertaraSidebar, CertaraSidebarItem, CertaraSidebarList } from '@certara/certara-ui-react';


<CertaraSidebar collapsible={false}>
  <CertaraSidebarList>
    <CertaraSidebarItem>Default</CertaraSidebarItem>
  </CertaraSidebarList>
</CertaraSidebar>
// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';


@NgModule({
  imports: [CertaraUiAngularModule]
})


// In your template:
<certara-sidebar collapsible="false">
  <certara-sidebar-list>
    <certara-sidebar-item>Default</certara-sidebar-item>
  </certara-sidebar-list>
</certara-sidebar>

One row in a sidebar list or submenu: an inner <li> plus either a native <a>, a native <button>, or fully custom markup from the default slot.

Control (interaction, href, type)

  • auto (default): <a> when href is set, otherwise <button>.
  • anchor: always <a> (use with href).
  • button: always <button>. The separate type prop sets the element’s type (button | submit | reset).
  • custom: this component does not render <a> or <button>; put your own interactive element in the default slot.

Labeling

  • Optional label for plain text (wrapped in .menu-text); use the default slot for leading content (e.g. icon).
  • Use slot="label" for rich label markup instead of the label string.

Properties

Section titled “Properties”

active

Attributeactive
Typeboolean
Defaultfalse
Requiredfalse
DescriptionWhether this row is the active / current route (reflected for styling).

collapsedTooltip

Attributecollapsed-tooltip
Typestring
Defaultundefined
Requiredfalse
DescriptionTooltip when the sidebar is collapsed. Omit when the row does not need a tooltip (e.g. icon-only items).

disabled

Attributedisabled
Typeboolean
Defaultfalse
Requiredfalse
DescriptionDisables the inner <a> or <button> (and omits href on anchors when true).

hidden

Attributehidden
Typeboolean
Defaultfalse
Requiredfalse
DescriptionWhen true, sets the hidden attribute on the inner <li> and hides the row (see _wc-sidebar.scss). React usage: hidden={condition}. HTML may use hidden on the tag; it is not reflected onto the host to avoid display: contents + host hidden which is unreliable (visibility, a11y tree, focus, whether the subtree actually disappears from layout).

href

Attributehref
Typestring
Defaultundefined
Requiredfalse
DescriptionURL for <a href> when the row resolves to an anchor (interaction="anchor", or auto with href set). Not used for <button> or interaction="custom".

interaction

Attributeinteraction
Type"anchor" | "auto" | "button" | "custom"
Default'auto'
Requiredfalse
DescriptionHow the row’s interactive control is chosen. See component overview: auto uses href to pick <a> vs <button>; anchor / button force one or the other; custom leaves the control to the default slot.

label

Attributelabel
Typestring
Defaultundefined
Requiredfalse
DescriptionPlain-text row label. When set, use the default slot for leading content only (e.g. icon). Renders a .menu-text span unless you override with slot="label" for rich markup. When omitted, the default slot may contain the full row as before.

target

Attributetarget
Typestring
Defaultundefined
Requiredfalse
DescriptionPassed to <a target> when the resolved control is anchor. Ignored for <button> and custom.

type

Attributetype
Type"button" | "reset" | "submit"
Default'button'
Requiredfalse
DescriptionNative <button type="..."> when the resolved control is button. Ignored for <a> and for interaction="custom".

Events

Section titled “Events”
NameDescriptionBubbles
certaraSidebarItemClickFires when the inner native <button> is clicked (not emitted for <a> or interaction="custom").true

Methods

Section titled “Methods”

There are no public methods available for this component

Slots

Section titled “Slots”
NameDescription
defaultLeading content (e.g. icon). With label set, keep non-label content here only.
labelOptional rich HTML label; when empty, falls back to a .menu-text span from the label prop.