ActiveLink

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

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

 
import { ActiveLink } from 'astro-bootstrap'
NameTypeDefaultDescription
href required string Passes string to href property of &lt;a&gt; tag.
class string Appends classes to the &lt;a&gt; tag.
activeClass string active Class to be appended to &lt;a&gt; tag if the href matches the current page path.
disabledClass string disabled Class to be appended to &lt;a&gt; 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