Link React Component

Link is main component to create links for navigation, custom actions, switching tabs, open/close panels, etc.

Usage examples

Navigation Link

<Link href="/about/">About</Link>

Renders to:

<a href="/about/" class="link">About</a>

Back Navigation Link

<Link back>Back</Link>

Renders to:

<a href="#" class="link back">Back</a>

With Router Parameters

<Link href="/about/" animatePages={false} ignoreCache={true}>About</Link>

Renders to:

<a href="/about/" class="link" data-animate-pages="false" data-ignore-cache="true">About</a>

External Link

<Link href="http://google.com" external>Google</Link>

Renders to:

<a href="http://google.com" class="link external">Google</a>

Tab Link

<!-- Tabs -->
<Tabs>
  <Tab id="tab-1" active>Tab 1</Tab>
  <Tab id="tab-1">Tab 2</Tab>
</Tabs>
<!-- Switch Between Tabs -->
<Link tabLink="#tab-1">Show Tab 1</Link>
<Link tabLink="#tab-2">Show Tab 2</Link>

Renders to:

<!-- Tabs -->
<div class="tabs">
  <div class="tab active" id="tab-1">Tab 1</div>
  <div class="tab" id="tab-2">Tab 2</div>
</div>
<!-- Switch Between Tabs -->
<a href="#" data-tab="#tab-1" class="tab-link">Show Tab 1</a>
<a href="#" data-tab="#tab-2" class="tab-link">Show Tab 2</a>

Route Tab Link

Note, this requires tab routes to be configured.

<!-- Tabs -->
<Tabs>
  <Tab routeTabId="tab-1">Tab 1</Tab>
  <Tab routeTabId="tab-1">Tab 2</Tab>
</Tabs>
<!-- Switch Between Tabs -->
<Link routeTabLink="#tab-1" href="/tabs/">Show Tab 1</Link>
<Link routeTabLink="#tab-2" href="/tabs/tab-2/">Show Tab 2</Link>

Renders to:

<!-- Tabs -->
<div class="tabs">
  <div class="tab active">Tab 1</div>
  <div class="tab">Tab 2</div>
</div>
<!-- Switch Between Tabs -->
<a href="#" class="tab-link">Show Tab 1</a>
<a href="#" class="tab-link">Show Tab 2</a>

Open and Close Panel

<Link openPanel="left">Open Left Panel</Link>
<Link closePanel>Close Panel</Link>

Renders to:

<a href="#" data-panel="left" class="link open-panel">Open Left Panel</a>
<a href="#" class="link close-panel">Close Panel</a>

Open and Close Popup

<Link openPopup="#myPopup">Open Popup</Link>
<Link closePopup="#myPopup">Close Popup</Link>

Renders to:

<a href="#" data-popup="#my-popup" class="link open-popup">Open Popup</a>
<a href="#" data-popup="#my-popup" class="link close-popup">Close Popup</a>

With Icon & Color

<Link iconF7="home" text="Home" color="red"></Link>

Renders to:

<a href="#" class="link color-red">
  <i class="icon Icons">home</i>
  <span>Home</span>
</a>

Properties

Prop Type Default Description
noLinkClass boolean Removes "link" class
color string Link color. One of default colors
rippleColor string Link Touch-ripple color (affects only Material theme). One of default colors
theme string Link color theme. One of default colors
bg string Link background color. One of default colors
text string Link text
Badge Properties
badge string/number Badge count
badgeColor string Badge color. One of default colors
Control Links
tabLink string/boolean Enables tab link and specify CSS selector of the target tab (if specified as a string)
openPanel string/boolean Defines panel to open. Can be "left" or "right"
closePanel boolean Closes panel on click
openPopup string/boolean CSS selector of the popup to open on click
closePopup string/boolean CSS selector of the popup to close on click. Or boolean property to close currently opened popup
openPopover string/boolean CSS selector of the popover to open on click
closePopover string/boolean CSS selector of the popover to close on click. Or boolean property to close currently opened popover
openPicker string/boolean CSS selector of the picker to open on click
closePicker string/boolean CSS selector of the picker to close on click. Or boolean property to close currently opened picker
openLoginScreen string/boolean CSS selector of the login screen to open on click
closeLoginScreen string/boolean CSS selector of the login screen to close on click. Or boolean property to close currently opened login screen
openSortable string/boolean CSS selector of the Sortable list to open on click
closeSortable string/boolean CSS selector of the Sortable list to close on click. Or boolean property to close currently opened Sortable list
toggleSortable string/boolean CSS selector of the Sortable list to toggle on click. Or boolean property to toggle currently opened/closed Sortable list
Navigation / Router Properties
href string # URL of the page to load
view string CSS selector of the View to load the page
noFastClick boolean Disables fast click
external boolean Enable to bypass Framework7's link click handler
back boolean Enables back navigation link
force boolean Force page to load and ignore previous page in history (use together with back prop)
reload boolean Reloads new page instead of the currently active one
animatePages boolean Disables pages animation
ignoreCache boolean Ignores caching
pageName string Name of the page to load
template string Template name to load
routeTabLink string Used for tab routes. Connects the link to a tab with the same value in its routeTabId so that when the tab is active, the link appears as active too
Icon Properties
iconOnly boolean Enable when used in navbar with icon only inside
iconBadge string/number Adds badge to the icon (intended to be used in Tabbar's icons)
iconSize string/number Icon size in px
icon string Custom icon class
iconF7 string Name of F7 Icons font icon
iconMaterial string Name of Material Icons font icon
iconFa string Name of Font Awesome font icon
iconIon string Name of Ionicons font icon
iconIfIos string Icon to be used in case of iOS theme is used. Consists of icon family and icon name divided by colon, e.g. f7:home or ion:home
iconIfMaterial string Icon to be used in case of Material theme is used. Consists of icon family and icon name divided by colon, e.g. material:home or fa:home