TableOfContent#

Explore a desktop article#

Scroll inside the savings guide to follow the animated selection outline through three heading levels. The TOC stays on the right below a sticky header. stickyOffset and currentSectionOffset share the header clearance, while scroll-padding-top keeps linked headings visible. This example uses the translated default title, “On this page”. Link clicks scroll only this example. On small screens, the TOC becomes a disclosure above the article.

Sticky header

Build your savings plan

A little planning makes it easier to put money aside. Start with what matters to you, then find a rhythm that fits everyday life.

Choose a goal

A holiday, a new home or a little more peace of mind. Give your savings a purpose and decide when you want to reach it.

Find your monthly amount

Look at what comes in and what goes out. Choose an amount you can keep saving, even in a busy month.

Keep a safety buffer

Set aside a little for unexpected expenses. Keep this money easy to reach when you need it.

Find the right account

Match the account to your goal. Compare interest rates, fees and how quickly you can access your savings.

Access to your money

Some accounts let you withdraw whenever you want. Others reward you for leaving the money untouched.

Interest and fees

Check the effective interest rate and any withdrawal fees. Small differences add up over time.

Compare your options

Read the terms side by side and choose an account that supports how you plan to save.

Make saving a habit

A regular transfer can help your savings grow without adding another task to your day.

Set up a regular transfer

Choose a date just after payday. Start small and increase the amount when your budget allows it.

Adjust when life changes

Your savings plan can change with you. Lower the amount for a while or save a little more when you can.

Review your progress

Take a moment to see how far you have come. Regular check-ins help you stay on track.

Celebrate small milestones

Notice each step forward. Consistent contributions matter more than a perfect month.

Plan your next step

When you reach your goal, decide what comes next. Keep the habits that worked for you.

Follow a scrollable article#

Scroll inside the article or follow a section link. The current link follows visible headings inside the scroll container, and keyboard focus moves to the destination when a link is activated.

Set a savings goal

Give your savings a purpose. A clear goal helps you decide how much to set aside and when you need the money.

Choose an amount

Start with an amount that fits your everyday budget. You can adjust it as your situation changes.

Find the right account

Compare access to your money, interest and fees. Keep an emergency buffer available for unexpected expenses.

Review your progress

Check your progress regularly. Small, consistent contributions can help you build a useful buffer over time.

Generate links from headings#

Data accepts a flat list in document order. Level 1 represents the page title and does not appear in the navigation. Scroll the example article to move the selected outline. A deeper current section marks its closest visible ancestor.

Install the package

Add Eufemia to your application and load its styles.

TableOfContent.Root

Compose section links or supply a flat list of headings.

Properties and configuration

Adjust the depth and sticky offset to fit your page.

Implementation details

Headings below the visible depth highlight their nearest visible ancestor.

Test accessibility in your application

Check keyboard navigation and descriptive section labels.

Compose section links#

Use Root and nested Item elements when you own the markup. The selected section below is controlled so the example stays independent of the documentation page's scrolling.

<TableOfContent.Root
  title="Your savings guide"
  currentId="toc-declarative-interest"
>
  <TableOfContent.Item id="toc-declarative-start" text="Get started" />
  <TableOfContent.Item
    id="toc-declarative-accounts"
    text="Choose an account"
  >
    <TableOfContent.Item
      id="toc-declarative-interest"
      text="Interest and fees"
    />
  </TableOfContent.Item>
  <TableOfContent.Item id="toc-declarative-next" text="Next steps" />
</TableOfContent.Root>

Suggest an edit