While you're not required to use them, HAX supplies a series of elements that can make theme development effortless. You can see the source of these in greater detail under the theme directory of haxcms-elements . This is a brief overview of what they are and what they provide to your interface.
These smart elements can automatically modal, list children pages, be the active title, next page, breadcrumb nav and more.
import "@lrnwebcomponents/haxcms-elements/lib/ui-components/active-item/site-active-title.js";
import "@lrnwebcomponents/haxcms-elements/lib/ui-components/blocks/site-children-block.js";
import "@lrnwebcomponents/haxcms-elements/lib/ui-components/blocks/site-outline-block.js";
import "@lrnwebcomponents/haxcms-elements/lib/ui-components/layout/site-footer.js";
import "@lrnwebcomponents/haxcms-elements/lib/ui-components/layout/site-modal.js";
import "@lrnwebcomponents/haxcms-elements/lib/ui-components/navigation/site-breadcrumb.js";
import "@lrnwebcomponents/haxcms-elements/lib/ui-components/navigation/site-dot-indicator.js";
import "@lrnwebcomponents/haxcms-elements/lib/ui-components/navigation/site-menu-button.js";
import "@lrnwebcomponents/haxcms-elements/lib/ui-components/navigation/site-menu.js";
import "@lrnwebcomponents/haxcms-elements/lib/ui-components/navigation/site-top-menu.js";
import "@lrnwebcomponents/haxcms-elements/lib/ui-components/query/site-query-menu-slice.js";
import "@lrnwebcomponents/haxcms-elements/lib/ui-components/query/site-query.js";
import "@lrnwebcomponents/haxcms-elements/lib/ui-components/query/site-render-query.js";
import "@lrnwebcomponents/haxcms-elements/lib/ui-components/site/site-print-button.js";
import "@lrnwebcomponents/haxcms-elements/lib/ui-components/site/site-rss-button.js";
import "@lrnwebcomponents/haxcms-elements/lib/ui-components/site/site-title.js";
Now here's what each of them provide you which they are pretty self explanatory.
- site-active-title - the title of the active item wrapped in a h1 tag
- site-children-block - all child menu items based on a criteria match
- site-outline-block - part of the outline based on criteria match
- site-footer - a basic footer with license element based on site details
- site-modal - a basic modal with button that can house other elements
- site-breadcrumb - a breadcrumb trail for the active menu item
- site-dot-indicator - site links but as a simple line of dots
- site-menu-button - buttons for navigating through the active items in the menu. This is next, previous, parent and first child kinds of options.
- site-menu - A visualization of the hierarchy of your site, complete with check-marks given per page the user goes to (optional) as well as a lot of styling options and a highlighted bar that scrolls the menu into view for small screens. It's fantastic and one line.
- site-top-menu - Top level menu links with indicator that scrolls to focus
- site-print-button - print button with support for 4 levels of printing the site
- site-rss-button - a button that displays a link (opened in a new window) to get the RSS feed in RSS 2.0 or Atom 1.0 format (also applies correct semantic values for bots to discover)
- site-title - a link to the homepage of the site wrapped in an h1 tag
See the elements themselves for more details API examples and check out our themes as we leverage them heavily across the core themes.