W3CRM - React Nextjs Admin Dashboard Template

Default Tab

This is Home title

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove.

This is Profile title

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor.

This is Contact title

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove.

This is Message title

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor.


    <div className="default-tab">
      <Tab.Container defaultActiveKey={tabData[0].name.toLowerCase()}>
        <Nav as="ul" className="nav-tabs">
          {tabData.map((data, i) => (
            <Nav.Item as="li" key={i}>
              <Nav.Link eventKey={data.name.toLowerCase()}>
                <i className={`la la-${data.icon} me-2`} />
                {data.name}
              </Nav.Link>
            </Nav.Item>
          ))}
        </Nav>
        <Tab.Content className="pt-4">
          {tabData.map((data, i) => (
            <Tab.Pane eventKey={data.name.toLowerCase()} key={i}>
              <h4>This is {data.name} title</h4>
              <p>{data.content}</p>
              <p>{data.content}</p>
            </Tab.Pane>
          ))}
        </Tab.Content>
      </Tab.Container>
    </div>

Custom Tab 1

This is Home title

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove.

This is Profile title

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor.

This is Contact title

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove.

This is Message title

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor.


  <div className="custom-tab-1">
    <Tab.Container defaultActiveKey={tabData[0].name.toLowerCase()}>
      <Nav as="ul" className="nav-tabs">
        {tabData.map((data, i) => (
          <Nav.Item as="li" key={i}>
            <Nav.Link eventKey={data.name.toLowerCase()}>
              <i className={`la la-${data.icon} me-2`} />
              {data.name}
            </Nav.Link>
          </Nav.Item>
        ))}
      </Nav>
      <Tab.Content className="pt-4">
        {tabData.map((data, i) => (
          <Tab.Pane eventKey={data.name.toLowerCase()} key={i}>
            <h4>This is {data.name} title</h4>
            <p>{data.content}</p>
            <p>{data.content}</p>
          </Tab.Pane>
        ))}
      </Tab.Content>
    </Tab.Container>
  </div>

Nav Pills Tabs

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove.

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor.

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove.


  <Tab.Container defaultActiveKey={tabData[0].name.toLowerCase()}>
    <Nav as="ul" className="nav-pills mb-4 light">
      {tabData.map(
        (data, i) =>
          i !== tabData.length - 1 && (
            <Nav.Item as="li" key={i}>
              <Nav.Link eventKey={data.name.toLowerCase()}>
                Tab {i === 1 ? "Two" : i === 2 ? "Three" : "One"}
              </Nav.Link>
            </Nav.Item>
          )
      )}
    </Nav>
    <Tab.Content className="">
      {tabData.map(
        (data, i) =>
          i !== tabData.length - 1 && (
            <Tab.Pane eventKey={data.name.toLowerCase()} key={i}>
              <p>{data.content}</p>
              <p>{data.content}</p>
            </Tab.Pane>
          )
      )}
    </Tab.Content>
  </Tab.Container>

Nav Pills Tabs

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove.

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor.

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove.


  <Tab.Container defaultActiveKey={tabData[0].name.toLowerCase()}>
    <Nav as="ul" className="nav-pills mb-4 justify-content-end">
      {tabData.map(
        (data, i) =>
          i !== tabData.length - 1 && (
            <Nav.Item as="li" key={i}>
              <Nav.Link eventKey={data.name.toLowerCase()}>
                Tab {i === 1 ? "Two" : i === 2 ? "Three" : "One"}
              </Nav.Link>
            </Nav.Item>
          )
      )}
    </Nav>
    <Tab.Content className="">
      {tabData.map(
        (data, i) =>
          i !== tabData.length - 1 && (
            <Tab.Pane eventKey={data.name.toLowerCase()} key={i}>
              <p>{data.content}</p>
              <p>{data.content}</p>
            </Tab.Pane>
          )
      )}
    </Tab.Content>
  </Tab.Container>

Vertical Nav Pill

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove. Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove.

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor. Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor.


  <Row>
    <Tab.Container defaultActiveKey={tabData[0].name.toLowerCase()}>
      <Col sm={4}>
        <Nav as="ul" className="flex-column nav-pills mb-3">
          {tabData.map((data, i) => (
            <Nav.Item as="li" key={i}>
              <Nav.Link eventKey={data.name.toLowerCase()}>
                {data.name}
              </Nav.Link>
            </Nav.Item>
          ))}
        </Nav>
      </Col>
      <Col sm={8}>
        <Tab.Content className="ms-2">
          {tabData.map((data, i) => (
            <Tab.Pane eventKey={data.name.toLowerCase()} key={i}>
              <p>
                {data.content} {data.content}
              </p>
            </Tab.Pane>
          ))}
        </Tab.Content>{" "}
      </Col>
    </Tab.Container>
  </Row>

Vertical Nav Pill

Home Profile Contact Message


  <Row>
    <Tab.Container defaultActiveKey={tabData[0].name.toLowerCase()}>
      <Col sm={8}>
        <Tab.Content>
          {tabData.map((data, i) => (
            <Tab.Pane eventKey={data.name.toLowerCase()} key={i}>
              <p>
                {data.content} {data.content}
              </p>
            </Tab.Pane>
          ))}
        </Tab.Content>
      </Col>
      <Col sm={4} id="order-2">
        <Nav as="div" variant="pills" className="flex-column ms-2">
          {tabData.map((data, i) => (
            <Nav.Item as="a" key={i}>
              <Nav.Link eventKey={data.name.toLowerCase()}>
                {data.name}
              </Nav.Link>
            </Nav.Item>
          ))}
        </Nav>
      </Col>
    </Tab.Container>
  </Row>

Tab with icon

This is icon title

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting

This is icon title


  <Tab.Container defaultActiveKey={tabData[0].name.toLowerCase()}>
    <Nav as="ul" className="nav-tabs">
      {tabData.map(
        (data, i) =>
          i !== tabData.length - 1 && (
            <Nav.Item as="li" key={i}>
              <Nav.Link eventKey={data.name.toLowerCase()}>
                <i
                  className={`ti-${i === 2 ? "email" : data.icon}`}
                />
              </Nav.Link>
            </Nav.Item>
          )
      )}
    </Nav>
    <Tab.Content className="pt-4">
      {tabData.map(
        (data, i) =>
          i !== tabData.length - 1 && (
            <Tab.Pane eventKey={data.name.toLowerCase()} key={i}>
              <h4>This is icon title</h4>
              <p>{data.content}</p>
              <p>{data.content}</p>
            </Tab.Pane>
          )
      )}
    </Tab.Content>
    </Tab.Container>

Chat List

Chat with Khelesh

Notes

Notications

This is Home title

This is Profile title

This is Contact title

This is Message title

This is Home title

This is Profile title

This is Contact title

This is Message title

This is icon title

This is icon title

This is icon title

Tab