Link Component
The ds-link component provides navigation links with built-in support for internal routing and scroll position preservation.
Basic Usage
Section titled “Basic Usage”<ds-link href="/about">About</ds-link>External Links
Section titled “External Links”<ds-link href="https://example.com">External Link</ds-link>Internal Links
Section titled “Internal Links”Internal links automatically preserve scroll position when navigating:
<ds-link href="/products" internal>View Products</ds-link>Attributes
Section titled “Attributes”| Attribute | Type | Default | Description |
|---|---|---|---|
href | string | - | URL to navigate to |
internal | boolean | false | Whether this is an internal link (enables scroll preservation) |
target | string | - | Link target (_blank, _self, etc.) |
Scroll Position Preservation
Section titled “Scroll Position Preservation”DS One automatically preserves scroll position when navigating between pages using internal links. This provides a better user experience when users navigate back.
<!-- Scroll position is preserved --><ds-link href="/page1" internal>Page 1</ds-link><ds-link href="/page2" internal>Page 2</ds-link>Examples
Section titled “Examples”Open in New Tab
Section titled “Open in New Tab”<ds-link href="https://github.com/jo4712/ds-one" target="_blank"> View on GitHub</ds-link>With Icon
Section titled “With Icon”<ds-link href="/documentation"> <ds-icon name="open"></ds-icon> Documentation</ds-link>