nav

You can add this component to the statusline section of heirline opts.

require("heirline-components.all").component.nav()

You can see it at the right of this image

by default it uses all available providers. (line number + percentage + progress bar)

Available providers

These are the available providers for this component and its options.

ruler =  {}      -- if set, displays the current line number and column
percentage =  {} -- if set, displays the current navigation percentage.
scrollbar =  {}  -- if set, displays a interactive square that fills depending the point of the document you are.

By default all of them are enabled but you could disable the ruler, for example:

component.nav({ ruler = false }) -- to disable the ruler

Or change colors

component.nav({ scrollbar = { hl = { bg = #e06c75 } } }) -- to define a custom color for the provider scrollbar.
component.nav({ hl = { bg = #111111 } }) -- to define a custom color for the entire component.