The router link component is used for navigating to a specified link. Similar to the browser's anchor tag, it can accept a href for the location, and a direction for the transition animation.

Note: this component should only be used with vanilla and Stencil JavaScript projects. For Angular projects, use an <a> and routerLink with the Angular router.

Properties

Property	Attribute	Description	Type	Default
`color`	`color`	The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see theming.	`string \| undefined`	`undefined`
`href`	`href`	Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.	`string \| undefined`	`undefined`
`rel`	`rel`	Specifies the relationship of the target object to the link object. The value is a space-separated list of link types.	`string \| undefined`	`undefined`
`routerAnimation`	--	When using a router, it specifies the transition animation when navigating to another page using `href`.	`((baseEl: any, opts?: any) => Animation) \| undefined`	`undefined`
`routerDirection`	`router-direction`	When using a router, it specifies the transition direction when navigating to another page using `href`.	`"back" \| "forward" \| "root"`	`'forward'`
`target`	`target`	Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.	`string \| undefined`	`undefined`

CSS Custom Properties

Name	Description
`--background`	Background of the router link
`--color`	Text color of the router link

Built with StencilJS