Components

Link Group

Display a collapsible group of links with an optional header.

Usage

The Link Group component organizes related links under a common header, making it ideal for navigation menus and resource lists. It provides a clean, structured way to present hierarchical navigation options to users.

Each group can have a header to provide context for the links, and users can optionally toggle the visibility of any child links.

Links can be nested to create a hierarchy of links, and you can specify whether a link should open in a new tab.

::link-group
---
header: "Components"
collapsible: true
expanded: true
links:
  - text: "Accordion"
    href: "/components/accordion"
  - text: "Link Group"
    href: "/components/link-group"
    children:
      - text: "Badge"
        href: "/components/badge"
      - text: "Button"
        href: "/components/button"
        children:
          - text: "Card"
            href: "/components/card"
            children:
              - text: "Container"
                href: "/components/container"
      - text: "Grid Item"
        href: "/components/grid-item"
  - text: "Image"
    href: "/components/image"
---
::
LinkGroup Component Props

The link group header text. Defaults to ''.

Determines if the link group is collapsible. Defaults to `true`.

Determines if the group of links should be initially expanded. When `collapsible` is `false`, or if a link in the group is active, this prop has no effect. Defaults to `false`.

Props

The links to display in the group. Each link must have a text and href property, and can optionally include an external property to open the link in a new tab. You can also include a children property to display an expandable menu of child links.

  • Type: LinkGroupLink[]
  • Default: undefined
interface LinkGroupLink {
  /** The link display text. */
  text: string
  /**
   * The link URL that can be either:
   * - An absolute path relative to the portal domain (e.g. "/page")
   * - A full URL (e.g. "https://example.com/page")
   */
  href: string
  /** Whether the link should open in a new tab. Defaults to `false`.*/
  external?: boolean
  /** An array of links to display as children of the current link. */
  children?: LinkGroupLink[]
}

The optional text to display above the group of links.

  • Type: string
  • Default: ''

collapsible

Determines if the group of links is collapsible.

  • Type: boolean
  • Default: true

expanded

Determines if the group of links should be initially expanded.

  • Type: boolean
  • Default: false
If a link in the group is active (determined by matching the current URL pathname), or if collapsible is set to false, the group will be expanded by default regardless of the expanded prop value.

Shared Props

This component also includes the shared props listed below:

  • border - default is initial.
  • borderRadius - default is 0px.
  • margin - default is 0px.
  • padding - default is 0px.
  • styles - default is ''.

See here for more information on shared props.