Turbine UI - Laravel and Tailwind CSS Nav Link Component

Alert Avatar Badge Burger Button Button Group Card Code Container Dropdown F A Q Grid Heading Input Input Group Label Link List Group Media Menu Modal Nav Link Navbar Progress Section Select Sidebar Stat Table Text Textarea Theme Switcher Toast Toggle

Nav Link

Add links to your navigation

x-t-nav-link

Preview and Examples

Default Link

Brand Link

Primary Link

Secondary Link

Success Link

Warning Link

Danger Link

<x-turbine-ui-nav-link>
    Default Link
</x-turbine-ui-nav-link>
 
<x-turbine-ui-nav-link variant="brand">
    Brand Link
</x-turbine-ui-nav-link>
 
<x-turbine-ui-nav-link variant="primary">
    Primary Link
</x-turbine-ui-nav-link>
 
<x-turbine-ui-nav-link variant="secondary">
    Secondary Link
</x-turbine-ui-nav-link>
 
<x-turbine-ui-nav-link variant="success">
    Success Link
</x-turbine-ui-nav-link>
 
<x-turbine-ui-nav-link variant="warning">
    Warning Link
</x-turbine-ui-nav-link>
 
<x-turbine-ui-nav-link variant="danger">
    Danger Link
</x-turbine-ui-nav-link>

Attributes

Name	Type	Options	Description
accent	boolean	true false	Adds an accent
active	boolean	true false	Sets state as active
animate	boolean	true false	Adds an animation
border	boolean	true false	Adds a border
divide	boolean	true false	Adds a divide between elements
gradient	boolean	true false	Adds a gradient
hollow	boolean	true false	Removes background colour
hover	boolean	true false	Adds a hover state
href	string	string	Adds a link
prefix	string	string	Adds content to the start
ring	boolean	true false	Adds a ring
rounded	boolean	true false	Adds rounded corners
shadow	boolean	true false	Adds a shadow
size	string	xs sm md lg xl 2xl	Controls component scale
suffix	string	string	Adds content to the end
variant	string	default brand primary secondary success warning danger light dark	A variant is like a colour palette