Outline (Heading Hierarchy)

Undraw My Documents

About

Outline headings are headings that cuts the page into different hierarchical sections and creates an outline.

All headings that are not inside a component are outline headings.

The outline headings are used to create the TOC

Features

Numbering

You can enable and define a numbering for your outline heading.

You can choose:

  • a counter style for each level (default to decimal)
  • a counter separator (default to .)
  • a outline numbering prefix (default to blank)
  • a outline numbering suffix (default to - )

For instance, with:

  • the decimal counter style for all level
  • the default counter separator (.)
  • the prefix (
  • the suffix ) ,

you would get the following outline numbering sequence:

(1)
(1.1)
(1.1.1)
...

Counter Style

Below, you can find all supported counter style.

Counter Style Description
decimal Western decimal numbers (e.g., 1, 2, 3, …, 98, 99, 100).
decimal-leading-zero Decimal numbers padded by initial zeros (e.g., 01, 02, 03, …, 98, 99, 100).
arabic-indic Arabic-indic numbering (e.g., ١‎, ٢‎, ٣‎, ٤‎, …, ٩٨‎, ٩٩‎, ١٠٠‎).
upper-armenian Traditional uppercase Armenian numbering (e.g., Ա, Բ, Գ, …, ՂԸ, ՂԹ, Ճ).
lower-armenian Lowercase Armenian numbering (e.g., ա, բ, գ, …, ղը, ղթ, ճ).
bengali Bengali numbering (e.g., ১, ২, ৩, …, ৯৮, ৯৯, ১০০).
cambodian/khmer Cambodian/Khmer numbering (e.g., ១, ២, ៣, …, ៩៨, ៩៩, ១០០).
cjk-decimal Han decimal numbers (e.g., 一, 二, 三, …, 九八, 九九, 一〇〇).
devanagari devanagari numbering (e.g., १, २, ३, …, ९८, ९९, १००).
georgian Traditional Georgian numbering (e.g., ა, ბ, გ, …, ჟჱ, ჟთ, რ).
gujarati Gujarati numbering (e.g., ૧, ૨, ૩, …, ૯૮, ૯૯, ૧૦૦).
gurmukhi Gurmukhi numbering (e.g., ੧, ੨, ੩, …, ੯੮, ੯੯, ੧੦੦).
hebrew Traditional Hebrew numbering (e.g., א‎, ב‎, ג‎, …, צח‎, צט‎, ק‎).
kannada Kannada numbering (e.g., ೧, ೨, ೩, …, ೯೮, ೯೯, ೧೦೦).
lao Laotian numbering (e.g., ໑, ໒, ໓, …, ໙໘, ໙໙, ໑໐໐).
malayalam Malayalam numbering (e.g., ൧, ൨, ൩, …, ൯൮, ൯൯, ൧൦൦).
mongolian Mongolian numbering (e.g., ᠑, ᠒, ᠓, …, ᠙᠘, ᠙᠙, ᠑᠐᠐).
myanmar Myanmar (Burmese) numbering (e.g., ၁, ၂, ၃, …, ၉၈, ၉၉, ၁၀၀).
oriya Oriya numbering (e.g., ୧, ୨, ୩, …, ୯୮, ୯୯, ୧୦୦).
persian Persian numbering (e.g., ۱, ۲, ۳, ۴, …, ۹۸, ۹۹, ۱۰۰).
lower-roman Lowercase ASCII Roman numerals (e.g., i, ii, iii, …, xcviii, xcix, c).
upper-roman Uppercase ASCII Roman numerals (e.g., I, II, III, …, XCVIII, XCIX, C).
tamil Tamil numbering (e.g., ௧, ௨, ௩, …, ௯௮, ௯௯, ௧௦௦).
telugu Telugu numbering (e.g., ౧, ౨, ౩, …, ౯౮, ౯౯, ౧౦౦).
thai Thai (Siamese) numbering (e.g., ๑, ๒, ๓, …, ๙๘, ๙๙, ๑๐๐).
tibetan Tibetan numbering (e.g., ༡, ༢, ༣, …, ༩༨, ༩༩, ༡༠༠).
lower-alpha / lower-latin Lowercase ASCII letters (e.g., a, b, c, …, z, aa, ab).
upper-alpha / upper-latin Uppercase ASCII letters (e.g., A, B, C, …, Z, AA, AB).
lower-greek Lowercase classical Greek (e.g., α, β, γ, …, ω, αα, αβ).
hiragana Dictionary-order hiragana lettering (e.g., あ, い, う, …, ん, ああ, あい).
hiragana-iroha Iroha-order hiragana lettering (e.g., い, ろ, は, …, す, いい, いろ).
katakana Dictionary-order katakana lettering (e.g., ア, イ, ウ, …, ン, アア, アイ).
katakana-iroha Iroha-order katakana lettering (e.g., イ, ロ, ハ, …, ス, イイ, イロ)

Anchor

All outline headings supports an anchor that you can see when you hover over them.

Fixed top bar Adjustment

With a Fixed top menu bar, the location of the headings are automatically adjusted to redefine the top position of the page to be below the top bar.

More … see Fixed top menu bar.

Configuration

Numbering Enable

The outlineNumberingEnable configuration permits to enable or disable outline numbering.

Numbering Styling

The below configuration permits to style the numbering as you wish.

Configuration Description Default
outlineNumberingCounterStyleLevel2 Level 2 counter_style decimal
outlineNumberingCounterStyleLevel3 Level 3 counter_style decimal
outlineNumberingCounterStyleLevel4 Level 4 counter_style decimal
outlineNumberingCounterStyleLevel5 Level 5 counter_style decimal
outlineNumberingCounterStyleLevel6 Level 6 counter_style decimal
outlineNumberingCounterSeparator The separator between counters .
outlineNumberingPrefix The prefix (before the outline number counter sequence)
outlineNumberingSuffix The suffix (after the outline number counter sequence) -

Supports

The top TOC Level supported for outline numbering is 2

We support only the value 1 and 2 of the TOC configuration of the toptoclevel

  • A value of 1 will show the page title in the TOC
  • A value of 2 will not show the page title in the TOC

All value above will render inconsistent numbers for the TOC.




Showcase yourself and your brand

Get free news, tips, and tricks
to create a remarkable experience for your readers.




Recommended Pages
Undraw Add Content Re Vgqa
ComboStrap Heading

A description for the search page result engine
Undraw Website Builder Re Ii6e
ComboStrap UI - Table of Content ( TOC )

The toc (table of content) gives to the reader an overview of your page by showing the outline headings label in a tree fashion. The Table of Content of this page is: TOC The toc is an element or...
Undraw My Documents
H1 - A shorter version of the title

The H1 is the text of the first header and can be used in template within a list of link.
Page Explorer List Name To Ui Region
Page-explorer: adding page navigation easily to your website

With the page-explorer component, you can add an explorer like panel that will list your pages in a list or collapsible tree fashion
Undraw My Documents
Top navigation bar made simple

A top menubar is just two steps



Task Runner