AnchorLinks are links referencing a specific section of the current page by using an identifier which should be present on another, referenced, element.

When the user interacts with an AnchorLink, the default implementation scrolls to the target element. The `scroll_behavior` property can be used to modify the behavior.

The most common place of anchor links is in article headings. This site uses them as well. In the following example, we create a heading and give it an id in order to reference it in the AnchorLink. When an AnchorLink is not created with explicit children, here, by using the shorthand notation for closing the tag, a single `#` character will be rendered instead. When not giving a descriptive name through children, specifying the description property is advised, so that accessibility technology can clearly describe the target.

use leptonic::atoms::link::AnchorLink; use leptonic::components::typography::H1; view! { <H2 id="my-section-anchor"> "My Section" <AnchorLink href="#my-section-anchor" description="Direct link to section: My Section"/> </H2> }

My Section#

But AnchorLinks can be used everywhere! Here, we simply render it with some text, removing the need for a description property. Interacting with (by pressing on) the link will also jump to the above heading.

<AnchorLink href="#my-section-anchor"> "My Section" </AnchorLink> My Section