## `` Red Hat Secondary Navigation A non-primary navigation for product and subcategory navigation. - Demo: https://ux.redhat.com/elements/navigation-secondary/demo/ ## Installation If using npm/bundlers: ```bash npm install @rhds/elements ``` ```js import '@rhds/elements/rh-navigation-secondary/rh-navigation-secondary.js'; ``` ```html ``` ## Questions and Feedback Questions? Comments? Feedback? Need help installing or implementing? Please [open a discussion thread](https://github.com/orgs/RedHat-UX/discussions/categories/q-a) here on GitHub. The Design Systems team will help ## Example ```html Red Hat Ansible Automation Platform Get started ``` ## `` ### Slots | Name | Description | Required | Example | |------|-------------|----------|---------| | **logo** | Navigation title or product name | Yes | `...` | | **nav** | Unordered list of hyperlinks | Yes | `` | | **cta** | Call to action component | No | `...` | ### Attributes | Name | Value | Description | Required | Example | |------|-------|-------------|----------|---------| | **role** | navigation | Ensures an accessible experience before or on failed upgrade | Yes | `` | | **color-palette** | "light" (default), "dark" | Sets the color theme for the navigation | No | `` | ### CSS Parts | Name | Description | |------|-------------| | **nav** | Override nav element styles | | **container** | Override grid container styles | | **cta** | Override cta wrapper container styles | ### CSS Custom Properties | Name | Default Value | |------|-------------| | `--rh-navigation-secondary-logo-max-width` | `10em` | | `--rh-navigation-secondary-z-index` | `102` | | `--rh-navigation-secondary-overlay-z-index` | `-1` | ### Minimum example ```html Logo ``` ## `` An `optional` component which replaces an href in the unordered list in the nav slot of the parent `rh-navigation-secondary` and is used with it's companion component `` ### Slots | Name | Description | Required | Example | |------|-------------|----------|---------| | **link** | Link to upgrade to a dropdown | Yes | `Dropdown` | | **menu** | rh-navigation-secondary-menu component | Yes | `...` | ### CSS Parts | Name | Description | |------|-------------| | **container** | Override wrapper container styles | ## `` ### Slots | Name | Description | Required | Example | |------|-------------|----------|---------| | **default** | Default slot | Yes | `
    ...
` | - The default slot should be used with either a `` or an `
    ` or `
      ` list of links ### Attributes | Name | Value | Required | Example | |------|-------------|----------|---------| | **layout** | `fixed-width`, `full-width` (default) | No | `Content` | - The `fixed-width` menu layout only uses the horizontal space in which it's content needs. - The `full-width` layout style menu spans the entire horizontal space of the viewport. ### CSS Custom Properties | Name | Default Value | |------|-------------| | `--rh-navigation-secondary-menu-section-grid` | `repeat(auto-fit, minmax(15.5em, 1fr))` | | `--rh-navigation-secondary-menu-section-grid-gap` | `2em` | | `--rh-navigation-secondary-menu-content-max-width` | `1136px` | ### CSS Parts | Name | Description | |------|-------------| | **full-width** | Override wrapper container styles for full-width menus | | **fixed-width**| Override wrapper container styles for fixed-width menus | | **sections** | Override wrapper container styles for menu content | ### Minimum example ```html Logo ``` ## `` ### Slots | Name | Description | Required | Example | |------|-------------|----------|---------| | **header** | Header element describing the sibling list | Yes | `

      List Title

      ` | | **links** | Unordered list of hyperlinks | Yes | `
        ...
      ` | | **cta** | Call to action component | No | `...` | ### CSS Parts | Name | Description | |------|-------------| | **container** | Override wrapper container styles for menu-section content | ### Minimum example ```html Logo ```