# Ionic Header and Footer * * * ## Header The Header is a component fixed at the top of the screen and can contain elements like a title and left/right functional buttons. Ionic provides many default color styles. You can call different style names, or you can define your own. ### bar-light [Try it »](#) ### bar-stable [Try it »](#) ### bar-positive [Try it »](#) ### bar-calm [Try it »](#) ### bar-balanced [Try it »](#) ### bar-energized [Try it »](#) ### bar-assertive [Try it »](#) ### bar-royal [Try it »](#) ### bar-dark [Try it »](#) * * * ## Sub Header The Sub Header is also fixed at the top, but it sits below the Header. Even if you don't define a Header, the Sub Header will still have a Header's distance from the top. The color styles are the same as the Header. [Try it »](#) * * * ## Footer The Footer is at the very bottom of the screen and can contain various types of content. [Try it »](#) The Footer is similar to the Header above, just replace the style name `bar-header` with `bar-footer`. [Try it »](#) Additionally, if the footer has no title but needs a button on the right, you need to add `pull-right` to the right-side button, like this: [Try it »](#) [](#)(#) (#)[](#) [Volcengine Coding Plan supports mainstream large models like Doubao, GLM, DeepSeek, Kimi, MiniMax, officially supplied, stable and reliable. Configuration Guide ¥9.9/month Sign up now](https://maas.xfyun.cn/modelSquare?ch=maas_lm_l2E)