Leader

Create dot leaders for pricing menus or tables of contents.

A leader, also known as a dot leader or a tab leader, is a repeating pattern used to visually connect content across horizontal spaces. It is most commonly used for restaurant menus, between the meals and prices, and for tables of contents, between titles and page numbers.

Usage

To apply this component, add the uk-leader attribute to the element on the left. A line of characters, by default dots, will then fill the remaining space between the item and its adjacent element.

<div uk-leader></div>

Fill character

To change the dot to any custom character, just add the fill: STRING option to the attribute.

<div uk-leader="fill: -"></div>

Note The default fill character can be set through CSS variable.

.uk-leader-fill-content::before {
  content: ".";
}

:root {
  --uk-leader-fill-content: ".";
}

Responsive

It’s possible to disable the leader for different device widths by applying the media option to the attribute and adding the appropriate viewport width. Add a number in pixels, for example media: 640, or a breakpoint, for example media: @m. The leader will be shown from the specified viewport width and upwards, but not below.

<div uk-leader="media: @m"></div>

Component options

Any of these options can be applied to the component attribute. Separate multiple options with a semicolon. Learn more

Option	Value	Default	Description
fill	String		Optional fill character.
media	Boolean, Number, String	false	Condition for the space filling - a width as integer (e.g. 640) or a breakpoint (e.g. @s, @m, @l, @xl) or any valid media query (e.g. (min-width: 900px)).

JavaScript

Learn more about JavaScript components.

Initialization

UIkit.leader(element, options);

Theme development

On your tailwind.config.js file, add the Leader component within the ui() plugin.

import ui from "franken-ui";

ui({
    components: {
        leader: {
            hooks: {}
        }
    }
}),

Available hooks

Note If you are developing theme from scratch, you can use all these hooks. If you’re using the shadcn/ui theme, some hooks might not work as they were already in use or removed. Learn more about using hooks.

Hook Name	Affected Classes
hook-leader	.uk-leader
hook-misc	*