AnchorNav
A list of the sections on one long page, which jumps to a section and shows the one the page is at.
Master
Switch the variant. Scroll the page beside it, or click a row: the caret and the strong line follow the section the page is at.
Details
Name, owner and the account this record belongs to.
Billing
Terms, the billing day and the invoice the run writes to.
Usage
Metered lines, the rate they are billed at and this period's totals.
History
Every change on the record, newest first.
Usage
Use AnchorNav beside a long page that is split into sections, like a settings page or a long record: a contract, an account or a policy. It is one component: pass items, where each id is the id of that section on the page. Clicking a row scrolls to it and gives it focus. The row the page is at has a strong line and a caret. spy follows the page as it scrolls; offset keeps the jump clear of a sticky header. The menu variant is the same list inside a popover, for narrow screens. This is a map of one page, not app navigation: use AppNav for that, and Tabs to switch views. See contracts/anchornav.json for the full contract.
Do's
- A long page split into named sections, like settings or a long record.
- A reading page where people need to see where they are and jump about.
Don'ts
- Do not use it for app navigation. Use AppNav.
- Do not use it to switch views on one screen. Use Tabs.
- Do not use it for steps in a flow. Use Steps.
- Do not point a row at a section that is not on the page.
- Do not use raw hex.
<AnchorNav variant="rail" />