How to create tabs like these?

I have a question, I have installed so many themes but I’m still not able to do this

I want to create a tabs like this screenshot with icons and good backgrond / tab lookings and inside these tabs I want to insert shortcodes of plugins

For example I want to add a shortcode for my taxi booking plugin and in the next tab I want to add a shortcode of my tours plugin, what are the plugin/themes that supports this way? even If It’s paid, or how to do it myself?

Help needed with Tabs and Sub Tabs Creation

Hi Everyone,
I'm new to Web site Page Design Just learning I have Web site
This is an HTML Bootstrap Css Corrections for to alter the Tabs or Menu Font size and to Add Drop down Menu in the Skill Development Menu
<li class="nav-item-child active margin dropdown ">
<a class="nav-link dropdown-toggle" href="#" id="dropdown-a" data-toggle="dropdown">Skill Development</a>
<div class="dropdown-menu"…

Help needed with Tabs and Sub Tabs Creation

DOM access between same-origin tabs

Consider the following website. Page A ( contains a login form and its password field has the attributes name and id set to "password". Page B ( has a XSS vulnerability that allows an attacker to inject JavaScript code. One opens page A in a browser tab and enters a password, but does not submit it. Then, one opens another tab and visits page B there.

Since the pages have the same web origin, the Same-Origin Policy does not restrict access between them and, from the browser’s view, the attacker’s code is loaded from the origin But the pages’ DOMs are not connected by any path that allows to access each other.

Can the attacker’s injected JavaScript code access the password field and the password entered into it? If so, could someone provide a small example?

What is the first thing you look for when it is bottleneck situation for you to decide on closing of tabs?

I have 54 tabs opened right now and I won’t be surprised if I open 20 more today.

I keep wondering is, can there be a way where browser assists us by giving us something that we seamlessly adopt by giving us better ways to handle our greediness towards tabs.

What is the first thing you look for when it is bottleneck situation for you to decide on closing of tabs:

-Age of the browser — How old is that, opened 2 days ago?

-Revisit the content of the tab — To make sure you are not closing anything you would be needing soon?After that, you either close it or bookmark it for later(may be).

-The sequence — Since many links open the new tab next to its previous one, wondering if same sequence (as displayed in the browser)matters.

Please feel free to add parameters that I am not factoring in.

Can two tabs have different CTAs?

I came across this case wherei have two tabs and under one , we have option to show save and cancel and not in other, as follows:

First Tab

First tab

Second Tab

enter image description here

When you click on one member, it opens a panel that slides from right and we have save in that panel.

enter image description here

Please let me know if there’s problem with this flow and how to have a consistent tab navigation view.


Any alternative to Carousal Tabs for mobile?

I am designing a mobile application for enterprise , so for desktop view we are using tabs as you can see in the image below. I want to design the same for mobile, so if we use carousal tab navigation we have to swipe to reach last tab and it can be less discoverable.

enter image description here

Mobile views

  1. Carousal tab navigation

enter image description here

  1. Tab with more dropdown

enter image description here

So wanted to know if there’s any better alternative to this?

Mobile app with tabs a bad idea?

I am trying to draw out what I want to build for a new mobile app, and I’ve run into a conundrum with tabs. I have four main categories of content, and thought it would be nice to have tabs at the top users could select to get to the content they wanted quickly, as shown below. (Please excuse the crudity of my MSPaint drawing. Currently, the Users tab is selected.)

App wireframe with 4 tabs across the top

The problem I’ve run into is in my flow diagram (this is what I’m calling a diagram that shows how one page flows to the next, looked at from a user perspective). Let’s say I have content on the Users tab, and I want to add a screen that allows me to add a New User or a screen that that allows me to update an existing user’s information. I had thought I would just do a pop up if they clicked on an existing users’s name (or New User), but I’m starting to wonder if tabs and popups don’t mix well.

I definitely don’t want to have different breadcrumbs for each tab, as I think that would be terribly hard to navigate. So the root of my question is: what is a common guideline for having more than one screen per tab? Or should I abandon tabs entirely? Each of these 4 tabs could have more than one screen.

Multiple Result Tabs in Workbench

enter image description hereI have several queries in the editor, each terminating with a semi-colon (I am teaching myself SQL and so in the editor is a mix of queries and notes like below):

SELECT * FROM orders WHERE order_date >= ‘2019-01-01’;

— AND operator

SELECT * FROM customers WHERE birth_date > ‘1990-01-01’ AND points > 1000;

— OR operator

SELECT * FROM customers WHERE birth_date > ‘1990-01-01’OR points > 1000 AND state = ‘VA’;

— NOT operator

— Exercise: FROM order_items table get the items — for order #6 — where total price is greater than 30

SELECT * FROM order_items WHERE order_id = 6 AND quantity * unit_price >= 30;

When I first began using MYSQL, I would run a query and only the last SELECT statement would run and the results would show in the result tab. The ACTION OUTPUT would show the time-stamp which clearly indicated only the last SELECT statement in the editor was run.

Now, all queries ending with a semi-colon are running simultaneously and each appears on its own tab and in the ACTION OUTPUT section on the bottom (i.e., “orders43”, “customers44”, “customers45” and so on.)

The only way I can get the most recent result is by highlighting the specific SELECT statement and running the query. However, I want to know why the results aren’t just “overriding” each other and the most recent SELECT statement being the results displayed in the same result tab…

At this rate, I’ll have hundreds of result tabs for each query ending with a semi-colon, and this is clearly not what I want nor was it how the workbench was working for me up until recently.

I am not sure why this is occurring, or how to stop it.

Any help would be greatly appreciated.


Two tabs on the same page?

enter image description here

In a page we’re designing, we have an issue of there being two tabs (closely positioned) and I wanted some suggestions for alternatives. Essentially in this page, we have a main tab that serves the function of switching between different tables. This function can’t be changed but can be displayed differently (drop down wasn’t working out). The second tab appears when the user clicks a button on the screen, and a slider opens up into half of the table. In this slider there is another set of tabs. Do you all have any suggestions as to how to maneuver this? Sorry if I’m being unclear, let me know if I can help clarify. I have attached an image for context.

Implementing Filters as Tabs in a Web Dashboard

We are trying to provide users with a strong filter mechanism on a Dashboard that collects visit data. It feels like we have arrived at a point where only a few pieces of the puzzle are missing and we don’t know how to place them.

The user should be able to:

  1. Define the filter parameters.
  2. Save them for future use along with a name.
  3. Apply them for one-time use to quickly check or search something without the need for saving them.
  4. Modify the parameters of an existing saved filter and save it again.
  5. Open tabs in the software itself and apply different filters (saved and unsaved) to easily switch from one type of data to another.
  6. Close tabs.


There is a live view tab that is static and can’t be modified or removed by the user. (Mentioned from now on as the default tab)

Solution: (So far) 1. A filter button on the dashboard that opens a side panel for filters that contains all the parameters and allows the user to save a filter, save as existing or just apply. Filter Panel View

  1. A Tab System that works like you’d expect. It allows the user to change the filter applied in a tab by clicking on a drop-down icon on the right side of the tab itself and selecting from the saved filters list. Drop-down implementation to select filters in tabs

  2. A plus button at the end of the tab list which works exactly like the drop-down above, prompting the user to select which filter view to apply on the new tab avoiding any empty states or empty tabs open.

Points we still can’t seem to get a grip on:

  1. How to make the experience of applying a filter to any open tab as seamless as possible? For example, if the user is on a tab and he clicks on the Filters button and changes some parameters and clicks Apply. Should we update the view to Unsaved View? Should we keep the name of the tab same with an asterisk to denote unsaved state with a reset button? Or should we open a new tab (potentially leading to a lot of unsaved tabs open?)

  2. If subsequently, he refreshes his page? Should the unsaved view disappear (being unsaved) or should we keep it in memory (potentially not really creating a need to use the ‘Save Filter’ feature)

  3. How to treat the default tab in all this? Should we disable all filtering options in the default tab to avoid any confusion leading to some loss in discoverability of filter features that are available as they will not show in the default tab or should we show filtering options on the default tab and open any changes made on the default tab in a new tab leading to a little bit of inconsistency (changing any filters from the default tab always opens a new tab while changing any filters from other tabs only makes changes to that specific tab and then implementing a fail safe or an error state if the user tries to make changes to the default tab with the maximum limit reached)

  4. Creating a responsive design around the solution.

It’ll be great to get insights and thought process on how to go about this problem.