Active Navigation
Demonstration
Get help finding work
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Arcu cursus euismod quis viverra nibh. Convallis aenean et tortor at risus viverra adipiscing at. Pretium vulputate sapien nec sagittis aliquam. Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. A diam sollicitudin tempor id eu. Malesuada pellentesque elit eget gravida. Vel quam elementum pulvinar etiam non. Morbi tristique senectus et netus et malesuada. Nulla posuere sollicitudin aliquam ultrices sagittis. Et tortor at risus viverra adipiscing at in. Nibh nisl condimentum id venenatis a. Eu facilisis sed odio morbi quis commodo. Sit amet massa vitae tortor condimentum.
Potenti nullam ac tortor vitae purus faucibus. Sed odio morbi quis commodo odio aenean sed adipiscing diam. Viverra orci sagittis eu volutpat. Habitant morbi tristique senectus et netus et malesuada fames. Et tortor consequat id porta nibh venenatis. Ridiculus mus mauris vitae ultricies leo. Eget duis at tellus at urna condimentum mattis pellentesque id. Vitae aliquet nec ullamcorper sit amet. Pulvinar elementum integer enim neque volutpat. Et tortor at risus viverra adipiscing at in. Velit dignissim sodales ut eu sem integer vitae. Ornare lectus sit amet est.
Internships and short term jobs
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Arcu cursus euismod quis viverra nibh. Convallis aenean et tortor at risus viverra adipiscing at. Pretium vulputate sapien nec sagittis aliquam. Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. A diam sollicitudin tempor id eu. Malesuada pellentesque elit eget gravida. Vel quam elementum pulvinar etiam non. Morbi tristique senectus et netus et malesuada. Nulla posuere sollicitudin aliquam ultrices sagittis. Et tortor at risus viverra adipiscing at in. Nibh nisl condimentum id venenatis a. Eu facilisis sed odio morbi quis commodo. Sit amet massa vitae tortor condimentum.
Potenti nullam ac tortor vitae purus faucibus. Sed odio morbi quis commodo odio aenean sed adipiscing diam. Viverra orci sagittis eu volutpat. Habitant morbi tristique senectus et netus et malesuada fames. Et tortor consequat id porta nibh venenatis. Ridiculus mus mauris vitae ultricies leo. Eget duis at tellus at urna condimentum mattis pellentesque id. Vitae aliquet nec ullamcorper sit amet. Pulvinar elementum integer enim neque volutpat. Et tortor at risus viverra adipiscing at in. Velit dignissim sodales ut eu sem integer vitae. Ornare lectus sit amet est.
Job boards
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Arcu cursus euismod quis viverra nibh. Convallis aenean et tortor at risus viverra adipiscing at. Pretium vulputate sapien nec sagittis aliquam. Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. A diam sollicitudin tempor id eu. Malesuada pellentesque elit eget gravida. Vel quam elementum pulvinar etiam non. Morbi tristique senectus et netus et malesuada. Nulla posuere sollicitudin aliquam ultrices sagittis. Et tortor at risus viverra adipiscing at in. Nibh nisl condimentum id venenatis a. Eu facilisis sed odio morbi quis commodo. Sit amet massa vitae tortor condimentum.
Potenti nullam ac tortor vitae purus faucibus. Sed odio morbi quis commodo odio aenean sed adipiscing diam. Viverra orci sagittis eu volutpat. Habitant morbi tristique senectus et netus et malesuada fames. Et tortor consequat id porta nibh venenatis. Ridiculus mus mauris vitae ultricies leo. Eget duis at tellus at urna condimentum mattis pellentesque id. Vitae aliquet nec ullamcorper sit amet. Pulvinar elementum integer enim neque volutpat. Et tortor at risus viverra adipiscing at in. Velit dignissim sodales ut eu sem integer vitae. Ornare lectus sit amet est.
Working for the City of New York
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Arcu cursus euismod quis viverra nibh. Convallis aenean et tortor at risus viverra adipiscing at. Pretium vulputate sapien nec sagittis aliquam. Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. A diam sollicitudin tempor id eu. Malesuada pellentesque elit eget gravida. Vel quam elementum pulvinar etiam non. Morbi tristique senectus et netus et malesuada. Nulla posuere sollicitudin aliquam ultrices sagittis. Et tortor at risus viverra adipiscing at in. Nibh nisl condimentum id venenatis a. Eu facilisis sed odio morbi quis commodo. Sit amet massa vitae tortor condimentum.
Potenti nullam ac tortor vitae purus faucibus. Sed odio morbi quis commodo odio aenean sed adipiscing diam. Viverra orci sagittis eu volutpat. Habitant morbi tristique senectus et netus et malesuada fames. Et tortor consequat id porta nibh venenatis. Ridiculus mus mauris vitae ultricies leo. Eget duis at tellus at urna condimentum mattis pellentesque id. Vitae aliquet nec ullamcorper sit amet. Pulvinar elementum integer enim neque volutpat. Et tortor at risus viverra adipiscing at in. Velit dignissim sodales ut eu sem integer vitae. Ornare lectus sit amet est.
Immediate hiring
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Arcu cursus euismod quis viverra nibh. Convallis aenean et tortor at risus viverra adipiscing at. Pretium vulputate sapien nec sagittis aliquam. Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. A diam sollicitudin tempor id eu. Malesuada pellentesque elit eget gravida. Vel quam elementum pulvinar etiam non. Morbi tristique senectus et netus et malesuada. Nulla posuere sollicitudin aliquam ultrices sagittis. Et tortor at risus viverra adipiscing at in. Nibh nisl condimentum id venenatis a. Eu facilisis sed odio morbi quis commodo. Sit amet massa vitae tortor condimentum.
Potenti nullam ac tortor vitae purus faucibus. Sed odio morbi quis commodo odio aenean sed adipiscing diam. Viverra orci sagittis eu volutpat. Habitant morbi tristique senectus et netus et malesuada fames. Et tortor consequat id porta nibh venenatis. Ridiculus mus mauris vitae ultricies leo. Eget duis at tellus at urna condimentum mattis pellentesque id. Vitae aliquet nec ullamcorper sit amet. Pulvinar elementum integer enim neque volutpat. Et tortor at risus viverra adipiscing at in. Velit dignissim sodales ut eu sem integer vitae. Ornare lectus sit amet est.
Resources for all
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Arcu cursus euismod quis viverra nibh. Convallis aenean et tortor at risus viverra adipiscing at. Pretium vulputate sapien nec sagittis aliquam. Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. A diam sollicitudin tempor id eu. Malesuada pellentesque elit eget gravida. Vel quam elementum pulvinar etiam non. Morbi tristique senectus et netus et malesuada. Nulla posuere sollicitudin aliquam ultrices sagittis. Et tortor at risus viverra adipiscing at in. Nibh nisl condimentum id venenatis a. Eu facilisis sed odio morbi quis commodo. Sit amet massa vitae tortor condimentum.
Potenti nullam ac tortor vitae purus faucibus. Sed odio morbi quis commodo odio aenean sed adipiscing diam. Viverra orci sagittis eu volutpat. Habitant morbi tristique senectus et netus et malesuada fames. Et tortor consequat id porta nibh venenatis. Ridiculus mus mauris vitae ultricies leo. Eget duis at tellus at urna condimentum mattis pellentesque id. Vitae aliquet nec ullamcorper sit amet. Pulvinar elementum integer enim neque volutpat. Et tortor at risus viverra adipiscing at in. Velit dignissim sodales ut eu sem integer vitae. Ornare lectus sit amet est.
Code
<div class="w-full">
<div class="c-active-navigation layout-content sticky top-0 bg-scale-0 z-20">
<div class="c-active-navigation__wrap">
<!--{ @data-active-navigation "scroll" designates this region as the horizontally scrolling element for JavaScript selecting }-->
<div class="c-active-navigation__scroll" data-active-navigation="scroll">
<!--{ @data-js "active-navigation" the selector that designates this element as the main navigation element containing navigation items for selecting }-->
<!--{ @aria-label "Jump Navigation" designates this nav element as a unique landmark for screen-readers }-->
<nav aria-label="Jump Navigation" class="c-active-navigation__nav" data-js="active-navigation">
<span class="c-active-navigation__item">Jump to</span>
<a class="c-active-navigation__item" href="#page-heading">Top of page</a>
<!--{ @data-active-navigation-item "active" designates the class or classes that will be applied to the link when it is "in view" }-->
<!--{ @data-inactive-navigation-item "inactive" designates the class or classes that will be applied to the link when it is not highlighted by the active class }-->
<!--{ @href ID Anchor target for the section it links to }-->
<a class="c-active-navigation__item" data-active-navigation-item="active" data-inactive-navigation-item="inactive" href="#get-help-finding-work">Get help finding work</a>
<!--{ @data-active-navigation-item "active" designates the class or classes that will be applied to the link when it is "in view" }-->
<!--{ @data-inactive-navigation-item "inactive" designates the class or classes that will be applied to the link when it is not highlighted by the active class }-->
<!--{ @href ID Anchor target for the section it links to }-->
<a class="c-active-navigation__item" data-active-navigation-item="active" data-inactive-navigation-item="inactive" href="#internships-and-short-term-jobs">Internships and short term jobs</a>
<!--{ @data-active-navigation-item "active" designates the class or classes that will be applied to the link when it is "in view" }-->
<!--{ @data-inactive-navigation-item "inactive" designates the class or classes that will be applied to the link when it is not highlighted by the active class }-->
<!--{ @href ID Anchor target for the section it links to }-->
<a class="c-active-navigation__item" data-active-navigation-item="active" data-inactive-navigation-item="inactive" href="#job-boards">Job boards</a>
<!--{ @data-active-navigation-item "active" designates the class or classes that will be applied to the link when it is "in view" }-->
<!--{ @data-inactive-navigation-item "inactive" designates the class or classes that will be applied to the link when it is not highlighted by the active class }-->
<!--{ @href ID Anchor target for the section it links to }-->
<a class="c-active-navigation__item" data-active-navigation-item="active" data-inactive-navigation-item="inactive" href="#working-for-the-city-of-new-york">Working for the City of New York</a>
<!--{ @data-active-navigation-item "active" designates the class or classes that will be applied to the link when it is "in view" }-->
<!--{ @data-inactive-navigation-item "inactive" designates the class or classes that will be applied to the link when it is not highlighted by the active class }-->
<!--{ @href ID Anchor target for the section it links to }-->
<a class="c-active-navigation__item" data-active-navigation-item="active" data-inactive-navigation-item="inactive" href="#immediate-hiring">Immediate hiring</a>
<!--{ @data-active-navigation-item "active" designates the class or classes that will be applied to the link when it is "in view" }-->
<!--{ @data-inactive-navigation-item "inactive" designates the class or classes that will be applied to the link when it is not highlighted by the active class }-->
<!--{ @href ID Anchor target for the section it links to }-->
<a class="c-active-navigation__item" data-active-navigation-item="active" data-inactive-navigation-item="inactive" href="#resources-for-all">Resources for all</a>
</nav>
</div>
</div>
</div>
<!--{ @data-active-navigation "observe" the selector that designates the container of items that will be observed }-->
<!--{ @data-active-navigation-observe-items Designates the items in the container that will be observed. The value of this attibute does not need to be "heading" but must be the same as the value of individual items that will be observed, designated by the @data-active-navigation-observe-item attribute }-->
<div class="layout-content" data-active-navigation="observe" data-active-navigation-observe-items="heading">
<div class="wrap">
<!--{ @class "pt-utility-anchor" adds sufficient padding to the top of this element for when the anchor link is clicked }-->
<!--{ @data-active-navigation-observe-item Designates this item as an observable item in the container. The value of this attribute does not need to be "heading" but it must be the same as the value of @data-active-navigation-observe-items }-->
<!--{ @id The ID of the anchor link target }-->
<div class="pt-utility-anchor" data-active-navigation-observe-item="heading" id="get-help-finding-work">
<div class="pt-utility-anchor sticky top-0 bg-scale-0 pb-2">
<!--{ @data-active-navigation-item "focus" indicates this element will receive focus when a user selects an anchor target }-->
<h5 data-active-navigation-item="focus">Get help finding work</h5>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Arcu cursus euismod quis viverra nibh. Convallis aenean et tortor at risus viverra adipiscing at. Pretium vulputate sapien nec sagittis aliquam. Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. A diam sollicitudin tempor id eu. Malesuada pellentesque elit eget gravida. Vel quam elementum pulvinar etiam non. Morbi tristique senectus et netus et malesuada. Nulla posuere sollicitudin aliquam ultrices sagittis. Et tortor at risus viverra adipiscing at in. Nibh nisl condimentum id venenatis a. Eu facilisis sed odio morbi quis commodo. Sit amet massa vitae tortor condimentum.</p>
<p>Potenti nullam ac tortor vitae purus faucibus. Sed odio morbi quis commodo odio aenean sed adipiscing diam. Viverra orci sagittis eu volutpat. Habitant morbi tristique senectus et netus et malesuada fames. Et tortor consequat id porta nibh venenatis. Ridiculus mus mauris vitae ultricies leo. Eget duis at tellus at urna condimentum mattis pellentesque id. Vitae aliquet nec ullamcorper sit amet. Pulvinar elementum integer enim neque volutpat. Et tortor at risus viverra adipiscing at in. Velit dignissim sodales ut eu sem integer vitae. Ornare lectus sit amet est.</p>
</div>
<!--{ @class "pt-utility-anchor" adds sufficient padding to the top of this element for when the anchor link is clicked }-->
<!--{ @data-active-navigation-observe-item Designates this item as an observable item in the container. The value of this attribute does not need to be "heading" but it must be the same as the value of @data-active-navigation-observe-items }-->
<!--{ @id The ID of the anchor link target }-->
<div class="pt-utility-anchor" data-active-navigation-observe-item="heading" id="internships-and-short-term-jobs">
<div class="pt-utility-anchor sticky top-0 bg-scale-0 pb-2">
<!--{ @data-active-navigation-item "focus" indicates this element will receive focus when a user selects an anchor target }-->
<h5 data-active-navigation-item="focus">Internships and short term jobs</h5>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Arcu cursus euismod quis viverra nibh. Convallis aenean et tortor at risus viverra adipiscing at. Pretium vulputate sapien nec sagittis aliquam. Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. A diam sollicitudin tempor id eu. Malesuada pellentesque elit eget gravida. Vel quam elementum pulvinar etiam non. Morbi tristique senectus et netus et malesuada. Nulla posuere sollicitudin aliquam ultrices sagittis. Et tortor at risus viverra adipiscing at in. Nibh nisl condimentum id venenatis a. Eu facilisis sed odio morbi quis commodo. Sit amet massa vitae tortor condimentum.</p>
<p>Potenti nullam ac tortor vitae purus faucibus. Sed odio morbi quis commodo odio aenean sed adipiscing diam. Viverra orci sagittis eu volutpat. Habitant morbi tristique senectus et netus et malesuada fames. Et tortor consequat id porta nibh venenatis. Ridiculus mus mauris vitae ultricies leo. Eget duis at tellus at urna condimentum mattis pellentesque id. Vitae aliquet nec ullamcorper sit amet. Pulvinar elementum integer enim neque volutpat. Et tortor at risus viverra adipiscing at in. Velit dignissim sodales ut eu sem integer vitae. Ornare lectus sit amet est.</p>
</div>
<!--{ @class "pt-utility-anchor" adds sufficient padding to the top of this element for when the anchor link is clicked }-->
<!--{ @data-active-navigation-observe-item Designates this item as an observable item in the container. The value of this attribute does not need to be "heading" but it must be the same as the value of @data-active-navigation-observe-items }-->
<!--{ @id The ID of the anchor link target }-->
<div class="pt-utility-anchor" data-active-navigation-observe-item="heading" id="job-boards">
<div class="pt-utility-anchor sticky top-0 bg-scale-0 pb-2">
<!--{ @data-active-navigation-item "focus" indicates this element will receive focus when a user selects an anchor target }-->
<h5 data-active-navigation-item="focus">Job boards</h5>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Arcu cursus euismod quis viverra nibh. Convallis aenean et tortor at risus viverra adipiscing at. Pretium vulputate sapien nec sagittis aliquam. Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. A diam sollicitudin tempor id eu. Malesuada pellentesque elit eget gravida. Vel quam elementum pulvinar etiam non. Morbi tristique senectus et netus et malesuada. Nulla posuere sollicitudin aliquam ultrices sagittis. Et tortor at risus viverra adipiscing at in. Nibh nisl condimentum id venenatis a. Eu facilisis sed odio morbi quis commodo. Sit amet massa vitae tortor condimentum.</p>
<p>Potenti nullam ac tortor vitae purus faucibus. Sed odio morbi quis commodo odio aenean sed adipiscing diam. Viverra orci sagittis eu volutpat. Habitant morbi tristique senectus et netus et malesuada fames. Et tortor consequat id porta nibh venenatis. Ridiculus mus mauris vitae ultricies leo. Eget duis at tellus at urna condimentum mattis pellentesque id. Vitae aliquet nec ullamcorper sit amet. Pulvinar elementum integer enim neque volutpat. Et tortor at risus viverra adipiscing at in. Velit dignissim sodales ut eu sem integer vitae. Ornare lectus sit amet est.</p>
</div>
<!--{ @class "pt-utility-anchor" adds sufficient padding to the top of this element for when the anchor link is clicked }-->
<!--{ @data-active-navigation-observe-item Designates this item as an observable item in the container. The value of this attribute does not need to be "heading" but it must be the same as the value of @data-active-navigation-observe-items }-->
<!--{ @id The ID of the anchor link target }-->
<div class="pt-utility-anchor" data-active-navigation-observe-item="heading" id="working-for-the-city-of-new-york">
<div class="pt-utility-anchor sticky top-0 bg-scale-0 pb-2">
<!--{ @data-active-navigation-item "focus" indicates this element will receive focus when a user selects an anchor target }-->
<h5 data-active-navigation-item="focus">Working for the City of New York</h5>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Arcu cursus euismod quis viverra nibh. Convallis aenean et tortor at risus viverra adipiscing at. Pretium vulputate sapien nec sagittis aliquam. Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. A diam sollicitudin tempor id eu. Malesuada pellentesque elit eget gravida. Vel quam elementum pulvinar etiam non. Morbi tristique senectus et netus et malesuada. Nulla posuere sollicitudin aliquam ultrices sagittis. Et tortor at risus viverra adipiscing at in. Nibh nisl condimentum id venenatis a. Eu facilisis sed odio morbi quis commodo. Sit amet massa vitae tortor condimentum.</p>
<p>Potenti nullam ac tortor vitae purus faucibus. Sed odio morbi quis commodo odio aenean sed adipiscing diam. Viverra orci sagittis eu volutpat. Habitant morbi tristique senectus et netus et malesuada fames. Et tortor consequat id porta nibh venenatis. Ridiculus mus mauris vitae ultricies leo. Eget duis at tellus at urna condimentum mattis pellentesque id. Vitae aliquet nec ullamcorper sit amet. Pulvinar elementum integer enim neque volutpat. Et tortor at risus viverra adipiscing at in. Velit dignissim sodales ut eu sem integer vitae. Ornare lectus sit amet est.</p>
</div>
<!--{ @class "pt-utility-anchor" adds sufficient padding to the top of this element for when the anchor link is clicked }-->
<!--{ @data-active-navigation-observe-item Designates this item as an observable item in the container. The value of this attribute does not need to be "heading" but it must be the same as the value of @data-active-navigation-observe-items }-->
<!--{ @id The ID of the anchor link target }-->
<div class="pt-utility-anchor" data-active-navigation-observe-item="heading" id="immediate-hiring">
<div class="pt-utility-anchor sticky top-0 bg-scale-0 pb-2">
<!--{ @data-active-navigation-item "focus" indicates this element will receive focus when a user selects an anchor target }-->
<h5 data-active-navigation-item="focus">Immediate hiring</h5>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Arcu cursus euismod quis viverra nibh. Convallis aenean et tortor at risus viverra adipiscing at. Pretium vulputate sapien nec sagittis aliquam. Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. A diam sollicitudin tempor id eu. Malesuada pellentesque elit eget gravida. Vel quam elementum pulvinar etiam non. Morbi tristique senectus et netus et malesuada. Nulla posuere sollicitudin aliquam ultrices sagittis. Et tortor at risus viverra adipiscing at in. Nibh nisl condimentum id venenatis a. Eu facilisis sed odio morbi quis commodo. Sit amet massa vitae tortor condimentum.</p>
<p>Potenti nullam ac tortor vitae purus faucibus. Sed odio morbi quis commodo odio aenean sed adipiscing diam. Viverra orci sagittis eu volutpat. Habitant morbi tristique senectus et netus et malesuada fames. Et tortor consequat id porta nibh venenatis. Ridiculus mus mauris vitae ultricies leo. Eget duis at tellus at urna condimentum mattis pellentesque id. Vitae aliquet nec ullamcorper sit amet. Pulvinar elementum integer enim neque volutpat. Et tortor at risus viverra adipiscing at in. Velit dignissim sodales ut eu sem integer vitae. Ornare lectus sit amet est.</p>
</div>
<!--{ @class "pt-utility-anchor" adds sufficient padding to the top of this element for when the anchor link is clicked }-->
<!--{ @data-active-navigation-observe-item Designates this item as an observable item in the container. The value of this attribute does not need to be "heading" but it must be the same as the value of @data-active-navigation-observe-items }-->
<!--{ @id The ID of the anchor link target }-->
<div class="pt-utility-anchor" data-active-navigation-observe-item="heading" id="resources-for-all">
<div class="pt-utility-anchor sticky top-0 bg-scale-0 pb-2">
<!--{ @data-active-navigation-item "focus" indicates this element will receive focus when a user selects an anchor target }-->
<h5 data-active-navigation-item="focus">Resources for all</h5>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Arcu cursus euismod quis viverra nibh. Convallis aenean et tortor at risus viverra adipiscing at. Pretium vulputate sapien nec sagittis aliquam. Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. A diam sollicitudin tempor id eu. Malesuada pellentesque elit eget gravida. Vel quam elementum pulvinar etiam non. Morbi tristique senectus et netus et malesuada. Nulla posuere sollicitudin aliquam ultrices sagittis. Et tortor at risus viverra adipiscing at in. Nibh nisl condimentum id venenatis a. Eu facilisis sed odio morbi quis commodo. Sit amet massa vitae tortor condimentum.</p>
<p>Potenti nullam ac tortor vitae purus faucibus. Sed odio morbi quis commodo odio aenean sed adipiscing diam. Viverra orci sagittis eu volutpat. Habitant morbi tristique senectus et netus et malesuada fames. Et tortor consequat id porta nibh venenatis. Ridiculus mus mauris vitae ultricies leo. Eget duis at tellus at urna condimentum mattis pellentesque id. Vitae aliquet nec ullamcorper sit amet. Pulvinar elementum integer enim neque volutpat. Et tortor at risus viverra adipiscing at in. Velit dignissim sodales ut eu sem integer vitae. Ornare lectus sit amet est.</p>
</div>
</div>
</div>
</div>
The Active Navigation is an in-page navigation element that allows users to understand the contents of a page. It is best used for long pages containing multiple headers, each header containing varied content and interactive elements. It is most closely associated with the In-page Navigation Component in the U.S. Web Design System (USWDS) with a few key differences.
The navigation horizontally scrolls to save vertical viewport space. This enables it to remain in view by sticking to the top of the user’s window.
The navigation includes a “Jump to top” link that will link to the page heading.
The aria-label for the nav element is “Jump Navigation” in this example. Other recommendations from the USWDS include “On this page,” “In this article,” or “Table of contents.”
Global Script
The Active Navigation requires JavaScript for functionality. To initialize the Active Navigation instance from the global script use the following code:
<script src="@nycopportunity/standard/dist/js/default.js"></script> <script> var Standard = new Default(); Standard.activeNavigation(); </script>
Module Import
For module imports, import the Active Navigation module from the source.
import ActiveNavigation from '@nycopportunity/standard/src/components/active-navigation/active-navigation'; new ActiveNavigation();
Configuration
The instantiated object ActiveNavigation() accepts an object with the following attributes:
| Attribute | Description |
|---|---|
selector
|
An alternate selector to the default '[data-js*=\"active-navigation\"]'
|
selectors
|
An object containing alternate selectors used by the script. |
observeOptions
|
An object containing options for the Intersection Observer API. |
The attribute observeOptions can be passed containing attributes such as the threshold and rootMargin. The threshold option represents “a single number or an array of numbers which indicate at what percentage of the target’s visibility the observer’s callback should be executed.” Refer to the MDN Intersection Observer API documentation for more details on what the options do.
new ActiveNavigation({
observeOptions: {
root: null,
rootMargin: '0px',
threshold: [0.15]
}
});