The breadcrumb component

A secondary navigation aid that helps users understand their location on a website or mobile application.

Introduced in SQLPage v0.18.0.

Top-level parameters

name required type description
class

TEXT

class attribute added to the container in HTML. It can be used to apply custom styling to this item through css. Added in v0.18.0.
id

TEXT

id attribute added to the container in HTML. It can be used to target this item through css or for scrolling to this item through links (use "#id" in link url).

Row-level parameters

name required type description
title REQUIRED

TEXT

Hyperlink text to display.
active

TEXT

Whether the link is active or not. Defaults to false.
description

TEXT

Description of the link. This is displayed when the user hovers over the link.
link

TEXT

Link to the page to display when the link is clicked. By default, the link refers to the current page, with a 'link' parameter set to the link's title.

Example 1

Basic usage of the breadcrumb component

select 
    'breadcrumb' as component;
select 
    'Home' as title,
    '/'    as link;
select 
    'Components'         as title,
    '/documentation.sql' as link;
select 
    'Breadcrumb'            as title,
    '?component=breadcrumb' as link;

Result

Example 2

Description of a link and selection of the current page.

select 
    'breadcrumb' as component;
select 
    'Home' as title,
    '/'    as link,
    TRUE   as active;
select 
    'Articles'  as title,
    '/blog.sql' as link,
    'Stay informed with the latest news' as description;
select 
    'JSON in SQL' as title,
    '/blog.sql?post=JSON%20in%20SQL%3A%20A%20Comprehensive%20Guide' as link,
    'Learn advanced json functions for MySQL, SQLite, PostgreSQL, and SQL Server' as description;

Result

See also: other components