{
  "id": "de76ce8219ff39e211ea323d",
  "source": "solid:signals",
  "type": "github-document",
  "title": "a",
  "content": "---\ntitle: A\nuse_cases: \u003e-\n  creating navigation links, active link styling, soft navigation, relative\n  paths, menu items\ntags:\n  - component\n  - navigation\n  - links\n  - active-states\n  - anchors\n  - soft-navigation\nversion: '1.0'\ndescription: \u003e-\n  The A component provides enhanced anchor tags with automatic base path\n  support, active states, and soft navigation for better user experience.\n---\n\nSolid Router exposes the `\u003cA /\u003e` component as a wrapper around the [native anchor tag ](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a).\nIt relies on the routing context provided by the [`\u003cRouter\u003e` component](/solid-router/reference/components/router) and if used outside, will triggers a runtime error..\n\n`\u003cA /\u003e` supports relative and base paths. `\u003ca /\u003e` doesn't. But `\u003ca /\u003e` gets augmented\nwhen JS is present via a top-level listener to the DOM, so you get the\nsoft-navigation experience nonetheless.\n\nThe `\u003cA /\u003e` supports the [`\u003cRouter /\u003e`](/solid-router/reference/components/router) base property (`\u003cRouter base=\"/subpath\"\u003e`) and prepend it to the received `href` automatically and the `\u003ca /\u003e`does not.\nThe same happens with relative paths passed to `\u003cA /\u003e`.\n\nThe `\u003cA\u003e` tag has an `active` class if its href matches the current location, and `inactive` otherwise.\nBy default matching includes locations that are descendants (e.g.: href `/users` matches locations `/users` and `/users/123`).\n\n:::tip\n\tUse the boolean `end` prop to prevent matching these. This is particularly\n\tuseful for links to the root route `/` which would match everything.\n:::\n\n## Soft Navigation\n\nWhen JavaScript is present at the runtime, both components behave in a very similar fashion.\nThis is because Solid Router adds a listener at the top level of the DOM and will augment the native `\u003ca /\u003e` tag to a more performant experience (with soft navigation).\n\n:::note\n\nTo prevent, both `\u003cA /\u003e` and `\u003ca /\u003e` tags from soft navigating when JavaScript is present, pass a `target=\"_self\"` attribute.\n\n:::\n\n## Props Reference\n\n| prop          | type    | description                                                                                                                                                                              |\n| ------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| href          | string  | The path of the route to navigate to. This will be resolved relative to the route that the link is in, but you can preface it with `/` to refer back to the root.                        |\n| noScroll      | boolean | If true, turn off the default behavior of scrolling to the top of the new page                                                                                                           |\n| replace       | boolean | If true, don't add a new entry to the browser history. (By default, the new page will be added to the browser history, so pressing the back button will take you to the previous route.) |\n| state         | unknown | [Push this value](https://developer.mozilla.org/en-US/docs/Web/API/History/pushState) to the history stack when navigating                                                               |\n| inactiveClass | string  | The class to show when the link is inactive (when the current location doesn't match the link)                                                                                           |\n| activeClass   | string  | The class to show when the link is active                                                                                                                                                |\n| end           | boolean | If `true`, only considers the link to be active when the current location matches the `href` exactly; if `false`, check if the current location _starts with_ `href`                     |",
  "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/reference/components/a.mdx",
  "metadata": {
    "path": "src/routes/solid-router/reference/components/a.mdx",
    "repo": "solidjs/solid-docs",
    "repo_url": "https://github.com/solidjs/solid-docs.git",
    "size": 3947,
    "source_type": "github"
  },
  "hash": "2589d320f87b6b235e4c65b107559dde2b069b08198c9f88e48ce8e1a323a281",
  "timestamp": "2026-02-23T11:43:00.192343467+01:00"
}