Foundation CSS Kitchen Sink Title Bar

Last Updated : 24 Feb, 2022

A Foundation is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. This framework is based on bootstrap, which is similar to SaaS. It’s more complex, versatile, and configurable. It also comes with a command-line interface, making it simple to use with module bundlers. Email framework provides you with responsive HTML emails, which can be read on any device. Foundation for Apps allows you to build fully responsive web applications.

Foundation CSS Kitchen Sink has the foundation elements to work well in our websites and applications. Kitchen Sink Title Bar is used to display the menu items on the left side or the right side as the title bar.

Foundation CSS Kitchen Sink Classes:

title-bar: It is used to create the title bar.
title-bar-left: It is used to create the title bar on the left side.
title-bar-right: It is used to create the title bar on the right side.
title-bar-title: It is used to give the title.

Syntax:

<div class="title-bar">
  ....
</div>

Example 1: The following code demonstrates the kitchen sink title bar on the left side of the bar.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Foundation CSS Kitchen Sink Title bar</title>
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
        crossorigin="anonymous">
</head>
 
<body>
    <center>
        <h1 style="color:green;">GeeksforGeeks</h1>
        <strong>Foundation CSS Kitchen Sink Title bar</strong>
    </center>
 
    <div class="title-bar">
        <div class="title-bar-left">
            <button class="menu-icon" type="button"></button>
            <span class="title-bar-title">GFGTitleBarLeft1</span>
            <span class="title-bar-title">GFGTitleBarLeft2</span>
        </div>
    </div>
</body>
 
</html>

Output:

Title bar on left side

Example 2: The following code demonstrates both the left and right kitchen sink title bar.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Foundation CSS Kitchen Sink Title bar</title>
 
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
        crossorigin="anonymous">
</head>
 
<body>
    <center>
        <h1 style="color:green;">GeeksforGeeks </h1>
        <strong>Foundation CSS Kitchen Sink Title bar</strong>
    </center>
 
    <div class="title-bar">
        <div class="title-bar-left">
            <button class="menu-icon" type="button"></button>
            <span class="title-bar-title">GFGTitleBarLeft</span>
        </div>
        <div class="title-bar-right">
            <span class="title-bar-title">GFGTitleBarRight</span>
        </div>
    </div>
</body>
 
</html>