Every link of a list accepts
href
(any URL) or
to
(a route with typed
params
and
search), plus
target,
rel,
download,
hreflang,
lang
and
title. With
to
it navigates without reloading, it is localized with
@meekojs/i18n
and the active route decides
aria-current. With
href, it is the current one when it matches the
current
prop.
UINavigationTree
The side navigation of this guide. Each group folds with a
details, and the current group always shows the current link.
<UINavigationTree label="Guide" current="/install" bind:groups="[
{ title: 'Getting started', items: [
{ label: 'Installation', href: '/install' },
{ label: 'UIButton', href: '/buttons', code: true, featured: true },
] },
]" />| Name | Type / default | Description |
|---|---|---|
groups
|
readonly UINavigationTreeGroup[]
| Required. title, icon, open and items; each link accepts icon, code, featured and aliases. |
current
|
string
| The current link, when they use href. |
label
|
string
| Name of the navigation. |
collapsible
|
boolean
true
| Groups fold. |
featuredLabel / emptyText
|
string
| Label of a featured link and text without links. |
class
|
string
| Additional classes. |
It accepts the
item(item, current),
icon(entry)
and
empty
snippets.
UINavigationTabs and UITabs
UINavigationTabs
are links between pages, not a
tablist: the indicator follows the current one with anchor positioning.
UITabs
are panels of one page, with the ARIA tabs pattern: the arrows change the panel, and the chosen one shows before hydration.
<!-- Links between pages -->
<UINavigationTabs label="Sections" current="/metrics"
bind:items="[{ label: 'Metrics', href: '/metrics' }, { label: 'Moderation', href: '/moderation' }]" />
<!-- Panels of the same page -->
<UITabs model="tab" label="Settings"
bind:items="[{ value: 'account', label: 'Account' }, { value: 'team', label: 'Team' }]">
<snippet name="panel-account">Your account</snippet>
<snippet name="panel-team">Your team</snippet>
</UITabs>| Name | Type / default | Description |
|---|---|---|
items
|
readonly UINavigationLink[]
| Required. The links. |
current / label / class
|
string
| Current link, name of the navigation and classes. |
| Name | Type / default | Description |
|---|---|---|
items
|
readonly UITabsItem[]
| Required. value, label and disabled. |
model
|
Signal<Value | undefined>
| The chosen tab; by default, the first one. |
label / labelledBy
|
string
| Accessible name of the list of tabs. |
id / class
|
string
| Identity and classes of the root. |
It accepts the
panel-<value>,
panel(item)
and
tab(item)
snippets, and the
change
event.
UIBreadcrumb, UIPageNavigation and UIPagination
The last item of
UIBreadcrumb
is the current page, and without a target it is text.
UIPageNavigation
links the previous and the next page.
UIPagination
counts what is shown and loads more: with
moreLink
it is a link that works without JavaScript.
<UIBreadcrumb bind:items="[{ label: 'Home', href: '/' }, { label: 'Guides', href: '/guides' }, { label: 'Tables' }]" />
<UIPageNavigation bind:previous="{ label: 'Modal', to: '/modals' }" bind:next="{ label: 'Popover', to: '/popover' }" />
<UIPagination bind:shown="rows.value.length" bind:total="total" bind:hasMore="more.value"
bind:busy="loading.value" on:loadMore="load" />| Name | Type / default | Description |
|---|---|---|
items
|
readonly UIBreadcrumbItem[]
| UIBreadcrumb. Required. The last one is the current page. |
previous / next
|
UINavigationLink
| UIPageNavigation. The neighbor pages. |
previousLabel / nextLabel
|
string
| UIPageNavigation. The text above each link. |
label / class
|
string
| Name of the navigation and classes. |
| Name | Type / default | Description |
|---|---|---|
shown / total
|
number
| How many show and how many there are. |
countText
|
string
| Replaces the count. |
hasMore / busy
|
boolean
false
| Whether there is more and whether it is loading. |
moreLink
|
UILinkTarget
| A link instead of the button: it works without JavaScript. |
loadMoreLabel / loadingLabel
|
string
| Texts of the button. |
label / class
|
string
| Name of the navigation and classes. |
It accepts the
default
snippet and the
loadMore
event.
UITableOfContents
It paints the active entry with
scroll-target-group, without a script, where it exists. A minimal
IntersectionObserver
keeps
aria-current="location"
in every browser. Use
variant="aside"
in the column and
variant="collapsible"
in the content:
UIPage
shows each one only when it applies.
<UITableOfContents variant="collapsible"
bind:entries="[{ id: 'usage', text: 'Usage', level: 2 }, { id: 'api', text: 'API', level: 2 }]" />| Name | Type / default | Description |
|---|---|---|
entries
|
readonly UITableOfContentsEntry[]
| Required. id, text and level. |
active
|
string
| Hands the control of the active entry to the application. |
variant
|
aside | collapsible
aside
| In the column or folding in the content. |
label / class
|
string
| Name of the navigation and classes. |
UILocaleSwitcher and UILocaleSuggestion
They are presentation: they receive the targets already computed and read neither routes nor cookies. With fewer than two languages, the switcher paints nothing. The suggestion is written in the language it offers and the
stay
button, in the current one; the application decides when to show it, after mounting, and what it stores.
<UILocaleSwitcher bind:items="[
{ code: 'es', label: 'Español', href: '/guide', current: true },
{ code: 'en', label: 'English', href: '/en/guide' },
]" />
<UILocaleSuggestion bind:items="items" suggested="en" on:stay="remember" />| Name | Type / default | Description |
|---|---|---|
items
|
readonly UILocaleItem[]
| Required. code, label, href or to, and current. |
suggested
|
string
| UILocaleSuggestion. The code it offers. |
message / goLabel / stayLabel
|
string
| UILocaleSuggestion. Its texts. |
label / class
|
string
| Accessible name and classes. |
The types
UINavigationTreeProps,
UINavigationTabsProps,
UITabsProps,
UIBreadcrumbProps,
UIPageNavigationProps,
UIPaginationProps,
UITableOfContentsProps,
UILocaleSwitcherProps
and
UILocaleSuggestionProps
are exported from
@meekojs/ui/runtime.