ActiveLink

The ActiveLink component automatically adds a class if the href matches the current page's path.

This component is still under development. Please only use the snippets provided below to avoid breaking changes.

View the official docs here

The ActiveLink checks if the href matches the current page. If true:

The activeClass is added (active by default)
Sets aria-current="page"

If the disabled (boolean) property is set:

The disabledClass is added (disabled by default)
tabindex="-1" is added to disable keyboard tabbing.
Css curser set to default to emulate standard text.
The href is removed.

Examples

Basic Example

Active Link docs page
Home
Disabled

Astro file

---
import { ActiveLink } from 'astro-bootstrap';
---
<ActiveLink href="/utilities/active-link" class="custom-class-added">Active Link docs page</ActiveLink>
<br>
<ActiveLink href="/">Home</ActiveLink>
<br>
<ActiveLink href="/disabled" disabled>Disabled</ActiveLink>
<style>
  .active {
    background-color: red;
  }
  a.disabled, a.disabled:hover, a.disabled:focus a.disabled:active, a.disabled:visited {
    color: gray;
  }
</style>

All Options

Active Link docs page
Home
Disabled

Astro file

---
import { ActiveLink } from 'astro-bootstrap';
---

<ActiveLink
  href="/utilities/active-link"
  activeClass="active-link"
  class="custom-class-added"
>
  Active Link docs page
</ActiveLink>
<br />
<ActiveLink href="/">Home</ActiveLink>
<br />
<ActiveLink href="/disabled" disabled disabledClass="disabled-link">
  Disabled
</ActiveLink>
<style>
  .active-link {
    background-color: red;
  }
  a.disabled-link,
  a.disabled-link:hover,
  a.disabled-link:focus a.disabled-link:active,
  a.disabled-link:visited {
    color: gray;
  }
</style>

API

ActiveLink

import { ActiveLink } from 'astro-bootstrap'

Name	Type	Default	Description
href ^required	string		Passes string to href property of `<a>` tag.
class	string		Appends classes to the `<a>` tag.
activeClass	string	`active`	Class to be appended to `<a>` tag if the href matches the current page path.
disabledClass	string	`disabled`	Class to be appended to `<a>` tag if the link is disabled with the next option.
disabled	boolean	`false`	Disables the link - adds disabledClass, sets `tabindex` to `-1`, href is removed and sets css `curser` to `default`