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;