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 = { padding = { left = 1 } },                           -- if set, displays the current navigation percentage.
scrollbar = { padding = { left = 1 }, hl = { fg = "scrollbar" } }, -- if set, displays a interactive square that fills depending the point of the document you are.
surround = { separator = "right", color = "nav_bg" },
hl = hl.get_attributes "nav",
update = { "CursorMoved", "CursorMovedI", "BufEnter" },

Examples

By default all available providers 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.