Adding in-page navigation

Created on 21 May 2024, 7 months ago
Updated 30 May 2024, 7 months ago

Problem

I am trying to add the in-page navigation component to a custom page template in a sass subtheme of USWDS Base.

I recently updated to USWDS 3 per the instructions on the USWDS website, my USWDS Base version is 3.7.1, my gulpfile uses @uswds/compile and compiles everything without errors, and I'm including "@forward uswds" in the main styles.scss file. I should have all the components, including in-page nav, available (I thought?) ... and yet it still won't display on my page. I've missed something somewhere, so I hope you can help me figure out what I'm doing wrong. Thanks!

πŸ’¬ Support request
Status

Closed: cannot reproduce

Version

3.7

Component

Code

Created by

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @tsurvuli
  • Status changed to Closed: cannot reproduce 7 months ago
  • πŸ‡ΊπŸ‡ΈUnited States jcandan

    Following the usage docs, I am able to get this to work with the following:

    Note: The node.html.twig file doesn't provide any twig-blocks to hook into. So, I ended up adding the markup via a preprocess hook:

    function MYMODULE_preprocess_node(&$variables) {
      // Specify the wrapper class.
      $variables['content_attributes']['class'] = 'usa-in-page-nav-container';
      // Prepend the content with the sibling aside element.
      // Specify the appropriate data-main-content-selector.
      $variables['content']['#prefix'] = '<aside
        class="usa-in-page-nav"
        data-title-text="On this page"
        data-title-heading-level="h4"
        data-scroll-offset="0"
        data-root-margin="0px 0px 0px 0px"
        data-threshold="1"
        data-main-content-selector=".block-system-main-block"
      ></aside>';
    }
    

    For future consideration, the community might be able to help better if you provide more detail about how to reproduce your issue.

    Hope this helps!

Production build 0.71.5 2024