Basic Anchor Navigation

Section one

This is the content of Section one. Scroll down to explore more sections.

Section two

This is the content of Section two. Scroll down to explore more sections.

Section three

This is the content of Section three. Scroll down to explore more sections.

Section four

This is the content of Section four. Scroll down to explore more sections.

Section five

This is the content of Section five. Scroll down to explore more sections.

<PrimerBrandAnchorNav CurrentTitle="Section one" Links="AnchorLinks">
    <Actions>
        <PrimerBrandButton Href="javascript:void(0);" Size="BrandButtonSize.Small">Sign up</PrimerBrandButton>
    </Actions>
</PrimerBrandAnchorNav>

<PrimerElement Tag="ElementTag.Div" Style="margin-top:2rem;">
    @foreach (var item in AnchorLinks)
    {
        <PrimerBrandSection Id="@item.Href.TrimStart('#')" Style=@($"padding: 100px 2rem; background-color: {GetSectionColor(item)}; margin-bottom: 2rem;")>
            <PrimerBrandHeading Level="BrandHeadingLevel.H2">@item.Text</PrimerBrandHeading>
            <PrimerElement Tag="ElementTag.P">This is the content of @item.Text. Scroll down to explore more sections.</PrimerElement>
        </PrimerBrandSection>
    }
</PrimerElement>

PrimerBrandAnchorNav Options

Available parameters for the anchor navigation component

Name	Description	Default Value	CSS Class
CurrentTitle	Text shown on toggle button	Section one	AnchorNav-link-label
Links	List of navigation items	[]	AnchorNav-link
Actions	Custom actions (e.g. button/link) rendered on the right	null	AnchorNav__actionsContainer

AnchorNavLinkItem Options

Options for items passed into Links

Name	Description	Default Value	CSS Class
Text	Display label of the item	-	AnchorNav-link-label
Href	Target anchor (e.g. #section1)	-	href
IsActive	Marks the link as selected	false	AnchorNav-link--is-active
IsExternal	Whether the link is external (opens in new tab)	false	-

private List<AnchorNavLinkItem> AnchorLinks = new()
{
    new() { Text = "Section one", Href = "#section1", IsExternal = false },
    new() { Text = "Section two", Href = "#section2", IsExternal = false },
    new() { Text = "Section three", Href = "#section3", IsExternal = false },
    new() { Text = "Section four", Href = "#section4", IsExternal = false },
    new() { Text = "Section five", Href = "#section5", IsExternal = false }
};

private string GetSectionColor(AnchorNavLinkItem section)
{
    return section.Text switch
    {
        "Section one" => "var(--base-color-scale-lemon-0)",
        "Section two" => "var(--base-color-scale-yellow-0)",
        "Section three" => "var(--base-color-scale-lime-0)",
        "Section four" => "var(--base-color-scale-green-0)",
        "Section five" => "var(--base-color-scale-teal-0)",
        _ => "white"
    };
}